4

I have a table with checkboxes. When a checkbox is checked I catch the event with jQuery but this checkbox is immediately unchecked.

The jsfiddle: http://jsfiddle.net/K4uDa

<table>
  <tr>
    <td><input type='checkbox' /></td><td>AA</td>
  </tr>
  <tr>
    <td><input type='checkbox' /></td><td>BB</td>
  </tr>
  <tr>
    <td><input type='checkbox' /></td><td>CC</td>
  </tr>    
</table>


$(function() {

  $("table tr").live("click", function() {
    alert('row clicked');
  });

  $("table tr td input:checkbox").live("click", function() {
   alert('checked/unchecked'); 
   return false;
  });
    
})

Where is the problem?

Sorry, I updated my jsfiddle here: http://jsfiddle.net/K4uDa/1/

I added a 'return false' because I don't want the other event to fire when a checkbox is checked/unchecked.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Bronzato
  • 9,438
  • 29
  • 120
  • 212

4 Answers4

4

The way return false works is by combining event.preventDefault() (which as the name implies prevents the default action of the even, such as un/checking the checkbox, following a link or submitting a form...) and event.stopPropagation() (which is what stops the event from propagating to/being 'heard by' its ancestor elements). IE does it a little differently, but effectively you want to retain the default action (the un/checking) while discarding the propagation. So, with that in mind I'd suggest:

$('input:checkbox').click(function(e){
    e.stopPropagation();
    alert(this.checked);
});

JS Fiddle demo.

Incidentally, it's worth pointing out that live() is deprecated in jQuery 1.7 and above (replaced by the on() method), and in versions before jQuery 1.7 the docs (for live()) recommend using delegate() instead.

But given that you're binding events directly to the elements themselves, which suggests they're not dynamically added, you may as well simply use the click() method directly.

References:

David Thomas
  • 249,100
  • 51
  • 377
  • 410
  • 1
    You're using jQuery, it normalizes `stopPropagation`, there is no need to check for `window.event`, or use `cancelBubble`. Just do `e.stopPropagation();`. – gen_Eric Jan 30 '13 at 14:55
  • 1
    +1 great answer, lots of references :). I might add that the way he used `live()` does not imply the elements are not dynamically added. `live()` just worked like this :). – kapa Jan 30 '13 at 15:12
  • @bažmegakapa: True, but if you're using `.live` for non-dynamically added elements, you're doing it wrong. – gen_Eric Jan 30 '13 at 15:58
  • 2
    @Rocket: I think it's safe to say 'he was doing it wrong' from the question itself. But bažmegakapa's point is accurate, that *is* how `live()` worked, though without more information in the question to address the point it's hard to say whether the `on()`, or the `click()`, method should be used. – David Thomas Jan 30 '13 at 16:02
3

Instead of return false, you should use event.stopPropagation();. return false, besides stopping propagation (which is what you want), also prevents the default action triggered by the event, so your checkbox will not be checked.

Also, live() is deprecated, so please use .on() (or delegate() for <1.7).

$("table tr td").on("click", "input:checkbox", function(e) {
    alert('checked/unchecked'); 
    e.stopPropagation();
});

jsFiddle Demo

kapa
  • 77,694
  • 21
  • 158
  • 175
1

EDIT - you need to stop the event from bubbling, by using event.stopPropagation() instead of return false

http://jsfiddle.net/K4uDa/16/

Luca
  • 9,259
  • 5
  • 46
  • 59
  • if you examine the order of fired events in my jsfiddle, you'll see that the 'checked/unchecked' alert is displayed. So it is checked but immediately unchecked... – Bronzato Jan 30 '13 at 14:45
  • aye, true. I've confused the click on the row with it. Back to your fiddle! – Luca Jan 30 '13 at 14:49
  • updated my answer, see new fiddle! and bažmegakapa's excellent answer who I haven't noticed before answering and explains it much better than my one – Luca Jan 30 '13 at 15:02
0

It's because of return false which stops checking the checkbox.

MadCom
  • 241
  • 2
  • 8
  • Yes but how can I fire the check event and prevent the row click event? Because the row click should allow me to navigate to another page... – Bronzato Jan 30 '13 at 14:40