Question

是否在两个<div>代码中委托了以下内容？即：一个或两个事件处理程序？我需要在event.delegateTarget上捕获data-id。附加到每个<div>标签时这很简单，但我可能有20个左右。不管怎么说，猜测不是什么大问题，但我想要更好的理解。

jQuery Docs声明，如果我为selector方法提供on，它会被委派，但我的方案似乎是一个稍微不同的情况，我附加到多个元素。有没有办法可以使用我的浏览器调试工具查看生成的事件处理程序？

如果我将处理程序附加到document，是否有任何简单的方法可以捕获包含div的内容？我的文档比示例复杂得多，我不能简单地依赖div和关联的data-id是input元素的直接父级这一事实。

$(".target").on("change", "input", function (event) {
...
});

<div class="target" data-id="123">
    <input type="checkbox" name="alpha" value="1" />
    <input type="checkbox" name="alpha" value="2" />
</div>

<div class="target" data-id="789">
    <input type="checkbox" name="beta" value="3" />
    <input type="checkbox" name="beta" value="4" />
</div>

Answer 1

这是一个处理函数，可以在两个<input>元素之一的<div>元素上调用“更改”事件。

真正的事件处理程序是一个jQuery内部事物，它检查事件目标并适当地调度。

如果您附加到<body>，则执行以下操作：

$('body').on('change', '.target input', function() { ... });

从处理程序中，this将是<input>，您可以使用.closest('.target')来查找容器。

Answer 2

我相信这是两个独立的代表团，如果这就是你所要求的。对处理程序函数的单独引用附加到两个.target div中的每一个，每个div处理由它们自己的一对复选框触发的事件。

如果你绑定到两个div的共同祖先，你总是可以使用$(this).closest('.target')找到包含div，正如Pointy建议的那样。

jQuery on（）事件委托

2 个答案: