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

【问题标题】：Why can't this checkbox, created dynamically with jQuery, be clicked?为什么不能点击这个用 jQuery 动态创建的复选框？
【发布时间】：2011-04-18 03:07:51
【问题描述】：

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，但如果您只创建一个框（因此是一个复选框），则会出现同样的问题。

【问题讨论】：

那个插件好像给你带来了各种麻烦！
@alex：当然可以！希望我知道足够的 jQuery 来制作我自己的。

标签： javascript jquery jquery-ui checkbox

【解决方案1】：

我不知道为什么，但是在摆弄（是的，在 fiddlejs 上）时，这似乎可以解决问题

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

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

我实际上是在尝试拦截该事件并手动将其设置为选中状态，但如果不需要设置它，那么嘿……也许在某处产生了一个额外的事件来否定第一个事件……？ Click 只触发一次。

可能与building jquery checkbox - can't set checked value有关

附言。仅在 Chrome for Linux 上测试过

【讨论】：

谢谢萨根！我一直在扯头发，但现在效果很好。

【解决方案2】：

您正在使用相同的id 创建多个复选框。

【讨论】：

啊，谢谢。我实际上不在真正的代码中，因为我根据一些外部代码为每个人的 id 添加了一个计数器，只是想我会把那一点去掉，因为它会使事情变得混乱，这似乎只是一个 jQuery问题。尽管如此，如果您只创建一个框，也会出现同样的问题，并且只有一个复选框。感谢您的接机，我会将其编辑到问题中。

【解决方案3】：

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

【讨论】：

感谢您的回答，现在我看到点击到达复选框。但我仍然无法设置复选框，我已经编辑了问题。

【解决方案4】：

实际上它在警报可见时被选中，但之后它变得未选中。我猜在您的事件处理程序将其设置为选中后，单击的默认事件（即切换复选标记）会发生，并且由于此时已选中，因此再次未选中。尝试从点击处理程序调用preventDefault。

【讨论】：

【解决方案5】：

你也可以试试这个更通用的方法

这对我有用。

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

【讨论】：