Can anyone let me know how to disable on click event for particular column.

Scenario : We displayed user details in a table , once click has been made on the table row, popup dialog window will appears with more details(Calling ajax request to retrieve details from database) . But our constraint is to disable on click event for single column associated with the table.

Eg :

<table border = '1'>
<tr>
<th> Name </th>
<th> Id </th>
<th> Phone Number</th>
</tr>
<tr onclick = "testing()">
<td> Krupa </td>
<td> 123 </td>
<td id = "disableClick"> <a href = "" target= '_blank'>Click me </a> </td>
</tr>
</table>

If click has been made on text(1st and 2nd column) , it will invoke on click event . But if user clicks on hyper link (3rd column) , i want to redirecting it to Google but not on-click event(testing()).

Can anyone help me to achieve this .

Can anyone let me know how to disable on click event for particular column.

Scenario : We displayed user details in a table , once click has been made on the table row, popup dialog window will appears with more details(Calling ajax request to retrieve details from database) . But our constraint is to disable on click event for single column associated with the table.

Eg :

<table border = '1'>
<tr>
<th> Name </th>
<th> Id </th>
<th> Phone Number</th>
</tr>
<tr onclick = "testing()">
<td> Krupa </td>
<td> 123 </td>
<td id = "disableClick"> <a href = "http://www.google." target= '_blank'>Click me </a> </td>
</tr>
</table>

If click has been made on text(1st and 2nd column) , it will invoke on click event . But if user clicks on hyper link (3rd column) , i want to redirecting it to Google but not on-click event(testing()).

Can anyone help me to achieve this .

• javascript
• jquery
• css
• html
• jquery-plugins

Share Improve this question Follow edited Jan 13, 2016 at 3:29 Krupa asked Jan 12, 2016 at 17:53 KrupaKrupa 30333 silver badges2525 bronze badges 3

• 3 can you share your table markup? – gurvinder372 Commented Jan 12, 2016 at 17:54
• Some code, any code, would go a long way here – adeneo Commented Jan 12, 2016 at 18:03
• @adeneo and it gets two upvotes. great. – tkay Commented Jan 12, 2016 at 18:08

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

try:

$(function() {
  $('table td').on('click', function() {
    if ($(this).index() == 2) {
      return false; // disable 3rd column
    }
  });
  $('table tr').on('click', function() {
    alert('You click the row');
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
</table>

do this through CSS

table td:nth-child(2) {
    pointer-events: none;
}

How about adding your click events to the column, then removing the event once it has been clicked using .unbind(). This will remove the event of the column that was clicked, but any others should still work.

$( '.column' ).on( 'click', function()
{
    // do ajax stuff... 

    // remove event 
    $( this ).unbind(); 

}); 

If you only want the click event to run once, you theoretically could use jquery's .one() feature instead of .on(). This will automatically unbind the event after running once. Of course this would mean you would have to bind the event again afterwards (if you need it)

http://api.jquery./one/

For example

$('.selector').one('click', function(){
    // your callback functionality
});

Another thing you could do would be to somehow check if the popup is active, and prevent the click handler from running if so

For example

$('.selector').on('click', function(){
    if (check_if_popup_is_active) {
        return;
    }
    // otherwise continue with
    // your callback functionality
});

You can use the jQuery .unbind() function from within your callback.

Consider following table for instance

<table>
  <tr>
    <th class='foo'>bar</th>
  </tr>
</table>

We can stop onclick events on th.foo as following

$('th').on('click', '.foo', function() {
  var that = this;

  // your AJAX call goes here

  success: function() {
    $(that).unbind('click');
  }
});

You can do this via CSS

you_css_selector {pointer-events:none;}