jQuery onClick 事件有效，除非单击文本

jQuery onClick event works, except when text is clicked

本文关键字：单击 文本 onClick 事件 有效 jQuery      更新时间：2023-09-26

我正在编写一个自定义调查视图，该视图将复选框替换为"按钮"，这些"按钮"只是用CSS渲染的区域。

我正在尝试在单击某个区域时触发事件。单击文本外部的区域时，将触发事件，但单击文本时，不会发生任何反应。我对jQuery很陌生（几天前开始）。我错过了一些完全明显的东西吗？谢谢

$('.checkbox-select').click(function () {
    var checked_length = $(this).has(".checked").length;
    if (checked_length == 0) {
        $(this).find('[type=checkbox]').addClass('checked');
        $(this).find('[type=checkbox]').prop('checked', true);
        $(this).find('label').css({
            "font-style": "italic"
        });
        $(this).css("background-color", "#6CCACD");
    } else {
        $(this).find('[type=checkbox]').removeClass('checked');
        $(this).find('[type=checkbox]').prop('checked', false);
        $(this).css("background-color", "#67517A");
        $(this).find('label').css({
            "font-style": ""
        });
    }
});

这是重现的问题：http://jsfiddle.net/m8r4xp6b/

发生这种情况是因为您的标签使用了"for"属性，当您单击文本时，它会导致事件触发两次。单击带有 for 属性的标签会导致选中或取消选中该复选框（或者，如果它是其他输入类型才能获得焦点）。

上面XGreen和Deepak提供的答案应该都有效。

这是一个更新的 jfiddle，它无需添加 event.preventdefault 方法或删除 for 属性即可工作。 http://jsfiddle.net/m8r4xp6b/21/

$('.checkbox-select').click(function () {
    var litem = $(this);
    var chk = litem.find('[type=checkbox]');
    var lbl = litem.find('label');
    var checked = chk.is(':checked');
    if(!checked) {
      chk.addClass('checked');
      chk.prop('checked', true);
      lbl.css({"font-style": "italic"});
      litem.css("background-color", "#6CCACD");
    }
    else {
       chk.removeClass('checked');   
       chk.prop('checked', false);
       litem.css("background-color", "#67517A");
       lbl.css({"font-style": ""});
    }
});

添加e.preventDefault(); 

$('.checkbox-select').click(function (e) {    
  var checked_length = $(this).has(".checked").length;
    if( checked_length == 0 ) {
      $(this).find('[type=checkbox]').addClass('checked');
      $(this).find('[type=checkbox]').prop('checked', true);
      $(this).find('label').css({"font-style": "italic"});
      $(this).css("background-color", "#6CCACD");
    }
    else {
       $(this).find('[type=checkbox]').removeClass('checked');   
       $(this).find('[type=checkbox]').prop('checked', false);
       $(this).css("background-color", "#67517A");
       $(this).find('label').css({"font-style": ""});
    }
    e.preventDefault();
});

同时使您的标签不可去除：

label {
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

链接到 jsfiddle

由于称为事件冒泡和捕获的机制，您的点击发生了两次。这意味着，如果您触发父级的事件，即使他们附加了该处理程序，其子项也会触发该事件。

如果您愿意，请在此处阅读更多内容

只需删除label即可。

$('.checkbox-select').click(function() {
  var checked_length = $(this).has(".checked").length;
  if (checked_length == 0) {
    $(this).find('[type=checkbox]').addClass('checked');
    $(this).find('[type=checkbox]').prop('checked', true);
    $(this).find('label').css({
      "font-style": "italic"
    });
    $(this).css("background-color", "#6CCACD");
  } else {
    $(this).find('[type=checkbox]').removeClass('checked');
    $(this).find('[type=checkbox]').prop('checked', false);
    $(this).css("background-color", "#67517A");
    $(this).find('label').css({
      "font-style": ""
    });
  }
});
input[type=checkbox] {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="checkbox-select">
  
    <input id="id_0-tag_0" name="0-tag" type="checkbox" value="44" />
  
  Test Test
</li>

相关文章：