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

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 building jquery checkbox – can't set checked value

PS. Only tested on Chrome for Linux