jQuery click事件仅在<tr>

Question

how can I make this click just work once in my html?

right now it is working in all tr from the table, should work just once after this not anymore.

$("#example tbody tr").on("click", function() {
   $(this).addClass('row-selected');            
})

Answer 1

You will need to unbind the click event after your first click:

 var tr = $("tr"); tr.one("click", function() { // this means that you can only click each row once $(this).toggleClass('row-selected'); tr.off('click'); // this will unbind the click event from the rest of the rows }) 

 .row-selected td { font-weight: bold; } 

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

Answer 2

Try with one instead of on . more about one http://api.jquery.com/one/

("#example tbody tr").one("click", function() {
   $(this).addClass('row-selected');            
})

Answer 3

Try this.

$("#example tbody tr").one("click", function() {
   $(this).addClass('row-selected');            
})

Answer 4

Inside your click event callback you can remove the event. Just pass the event through as a parameter.

$("#example tbody tr").on("click", function(event) {
   $(this).addClass('row-selected'); 
   event.target.onclick = null;
})

Answer 5

// Try This
jQuery(document).ready(function(){
 $(document.body).on("click", '#example tbody tr', function() {
  $(this).addClass('row-selected');            
 });
});

Answer 6

Try changing the on("click" to one("click"

Try the below

$("#example tbody tr").one("click", function() {
$(this).addClass('row-selected');            
})code here

or you can try checking out this page bind unbind

Here is the example they use on that site I linked.

$('#my-selector').bind('click', function() {
   $(this).unbind('click');
   alert('Clicked and unbound!');
});