Question

我正在使用一个允许用户在区域中绘制框的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，但是如果你只创建一个盒子（因此一个复选框），就会出现同样的问题。

Answer 1

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

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

设置框时。请参阅：http://jsfiddle.net/BBh3r/9/

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

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

有关

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;
      }
   }
});

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

5 个答案: