Why can't this checkbox, created dynamically with jQuery, be clicked?

Question

jsFiddle

I'm using a jQuery plugin that allows the user to draw boxes in an area. I use jQuery to put a checkbox (along with a dropdown list) in the box that appears when the user lets go of the mouse button (this is towards the bottom of the javascript in the jsFiddle). The problem is, the checkbox is unclickable.

I do have some click checking code in the _mouseStart, _mouseDrag and _mouseStop events to stop another box from being created when you click in an existing box, but I don't think this is causing the problem because the dropdown list that is created can be clicked, and furthermore if you remove the click checking code the checkbox remains unclickable.

What is causing the checkbox to be unclickable? Thanks for reading.

EDIT: Thanks to VinayC's answer, I can now see that the click reaches the checkbox, with this code:

$('#box').click(function(e){
    alert('clicked');
    $(this).attr('checked', true);
});

But the $(this).attr('checked', true); line doesn't make the checkbox checked. Can anyone tell me why? I've updated the jsFiddle

EDIT 2: Harmen noticed that the code assigns the same id to each checkbox. In the actual code there's a counter appended to the id, so each one is unique, but I've taken that out because I think this is just a jQuery issue. I'd change the jsFiddle, but if you just create one box (thus one checkbox), the same problem occurs.

Answer 1

It appears that top level event handlers are cancelling the click event. Add onclick event handler on check-box element alerting and you will see that click reaches to the checkbox.

Answer 2

You're creating multiple checkboxes with the same id.

Answer 3

I've got no idea why, but while fiddling around (yes, on fiddlejs), this seems to do the trick

  $('#box', ui.box).click(
      function(evt){
          evt.stopPropagation();
      }
   );

when setting up the box. See: http://jsfiddle.net/BBh3r/9/

I was actually trying to intercept the event and manually set it checked, but if there's no need to set it then hey.. Perhaps there's an extra event generated somewhere negating the first..? Click's only triggered once though.

Might be related to http://stackoverflow.com/questions/2474389/building-jquery-checkbox-cant-set-checked-value

PS. Only tested on Chrome for Linux

Answer 4

Actually it is checked while the alert is visible, but it becomes unchecked afterwards. I'm guessing that after your event handler sets it to checked, the default event for the click (which is to toggle the check mark) happens, and since it is checked at the moment, it becomes unchecked again. Try calling preventDefault from the click handler.