jQuery父子元素点击事件

Question

我的 HTML 看起来像这样(不幸的是它无法更改，因为它是使用我正在使用的 CMS 呈现的):

<li>
<input id="cb1" type="checkbox">
<label for="cb1">
<div>Some Other Content</div>
<div class="pledge">Click to Pledge</div>
</label>
</li>

jQuery。

$("div.pledge").click(function() {

  var checkboxlabel = $(this).parent("label");

  $("input[for=checkboxlabel]").attr('checked', !$checkbox.attr('checked'));

});

如果我单击标签内的任意位置，使用此代码将切换复选框。我需要的是仅当我单击 <div class="pledge"> 时才会发生该操作元素。我怀疑 .stopPropagation();会在这里帮助我，但我无法让它正常工作。

这是另一个似乎实现相同想法的镜头:

$("div.pledge").click(function() {

  $("input[for=' + this.parent("label").attr("id") + ']").attr('checked', !$checkbox.attr('checked'));

});

Answer 1

从字里行间看出，在我看来，以下内容无需任何 JS 即可达到您想要的结果:

<li>
<input id="cb1" type="checkbox">
<div>
<div>Some Other Content</div>
<label for="cb1">Click to Pledge</label>
</div>
</li>

http://jsfiddle.net/nnnnnn/VqmBb/

这会在复选框旁边显示“一些其他内容”和“点击 promise ”，但正如您在我的演示中看到的那样，只有“点击 promise ”部分在单击时选中/取消选中该框。

我已经交换了您的标签和“pledge”div，并利用标签的 for 属性将其与复选框关联起来，以便它自动选中/取消选中它。 (尽管现在外部 div 实际上不执行任何操作，并且可以将其删除，除非您需要它来进行样式设置。)

关于你的JS，以下行有一些问题:

$("input[for=checkboxlabel]").attr('checked', !$checkbox.attr('checked'));

首先，您的选择器 "input[for=checkboxlabel]" 似乎正在尝试使用之前在该行中声明的 checkboxlabel 变量，但您实际上做了什么完成只是包含一个恰好包含文本“checkboxlabel”的字符串。因此，这不会选择 html 中的任何元素，因为您没有“input”元素，其“for”属性等于字符串“checkboxlabel”。此外，您还有一个未在任何地方定义的变量 $checkbox。

更新:好的，以下内容应该适用于您更新的 html(它对我有用)。现有 JS 代码的问题除了您尝试使用未声明的变量 $checkbox 之外，还在于您尝试将点击处理程序绑定(bind)到“Promise"div 意味着您尚未执行任何操作来处理标签其他部分的点击。鉴于您特别想停止点击标签的其他部分，我建议您将 .click() 处理程序附加到 标签 - 点击标签的子项将冒泡到标签的点击处理程序，这样您就可以测试被点击的元素是否是类为“pledge”的元素。如果不返回 false 来取消标签点击的默认行为，但如果它是，则“pledge”元素不执行任何操作并让默认行为发生:

$("div.pledge").parent("label").click(function(e) {
    if (!$(e.target).hasClass("pledge"))
        return false;
});

(注意，我选择的是“div.pledge”的父级，而不是仅仅说 $("label").click()，这样此处理就不会附加到 所有标签。)

如果你不喜欢这个，我认为 mgibsonbr 的答案是一个不错的选择。