为什么不能单击这个用jQuery动态创建的复选框？

Question

的jsfiddle

我正在使用一个允许用户在一个区域中绘制框的jQuery插件。 我使用jQuery在用户放开鼠标按钮时出现的框中放置一个复选框（以及下拉列表）（这是jsFiddle中javascript的底部）。 问题是，复选框无法点击。

我确实在_mouseStart ， _mouseDrag和_mouseStop事件中有一些点击检查代码，以阻止在您单击现有框时创建另一个框，但我认为这不会导致问题，因为创建的下拉列表可以是单击，此外，如果您删除点击检查代码，则复选框仍然无法点击。

是什么导致复选框无法点击？ 谢谢阅读。

编辑：感谢VinayC的回答，我现在可以看到点击到达复选框，使用以下代码：

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

但是$(this).attr('checked', true); line不会选中复选框。 谁能告诉我为什么？ 我已经更新了jsFiddle

编辑2：Harmen注意到代码为每个复选框分配了相同的id。 在实际的代码中有一个附加到id的计数器，所以每个都是唯一的，但我已经把它拿出来因为我认为这只是一个jQuery问题。 我会改变jsFiddle，但是如果你只创建一个盒子（因此一个复选框），就会出现同样的问题。

Answer 1

我不知道为什么，但在摆弄（是的，在fiddlejs），这似乎做的伎俩

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

设置盒子时。 请参阅： http ： //jsfiddle.net/BBh3r/9/

我实际上试图拦截事件并手动设置它检查，但如果没有必要设置它然后嘿..也许有一个额外的事件生成某处否定第一个...？ 点击仅触发一次。

可能与构建jquery复选框有关 - 无法设置选中的值

PS。 仅在Chrome for Linux上测试过

Answer 2

顶级事件处理程序似乎取消了click事件。 在复选框元素警报上添加onclick事件处理程序，您将看到单击到达复选框。

Answer 3

您正在创建具有相同id多个复选框。

Answer 4

实际上，在警报可见的情况下进行检查，但之后它将被取消选中。 我猜测在事件处理程序将其设置为选中后，将发生单击的默认事件（即切换复选标记），并且由于此时已进行检查，因此它将再次取消选中。 尝试从单击处理程序调用preventDefault 。

Answer 5

您也可以尝试使用更通用的方法

这对我有用。

$(document).click(function (e) {
   if (element.tagName == 'INPUT') {
      if ($(element).attr("type") == 'checkbox') {
         e.stopPropagation();                                
         e.preventBubble();                             
         return;
      }
   }
});