javascript - 为什么这个使用 jQuery 动态创建的复选框不能被点击？

jsFiddle

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

我确实在 _mouseStart、_mouseDrag 和 _mouseStop 事件中有一些点击检查代码，用于在你点击已有的盒子时阻止创建另一个盒子，但我认为这不是问题的原因，因为创建的下拉列表是可以点击的，而且如果你移除点击检查代码，复选框仍然无法点击。

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

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

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

但是这一行 $ (this).attr('checked', true); 并没有使复选框被选中。有人能告诉我为什么吗？我已经更新了 jsFiddle

编辑 2：Harmen 注意到代码给每个复选框分配了相同的 id。在实际代码中，id 后面会附加一个计数器，因此每个都是唯一的，但我把它去掉了，因为我认为这只是一个 jQuery 问题。我本想修改 jsFiddle，但如果你只创建一个框（因此只有一个复选框），同样的问题仍然会发生。

答案＃1

我不知道为什么，但在摆弄的时候（是的，在 fiddlejs 上），这似乎管用

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

在设置盒子时。见：http://jsfiddle.net/BBh3r/9/

我实际上是想拦截这个事件并手动将它设置为选中，但如果根本没必要设置，那也无妨……也许在某个地方生成了额外的事件，从而抵消了第一次的？不过点击事件只触发了一次。

可能与构建 jQuery 复选框相关 - 无法设置选中值

附注：仅在 Linux 版 Chrome 上测试过

答案＃2

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