1

以下是跨两个<div>标签委托的吗？即：一两个事件处理程序？我需要data-id在 event.delegateTarget 上捕获。附加到每个<div>标签时这很简单，但我可能有 20 个左右。无论如何猜测都不是什么大问题，但我希望有更好的理解。

jQuery Docs 指出，如果我为该方法提供selector该on方法，则它是委托的，但我的场景似乎与我附加到多个元素的情况略有不同。有没有办法可以使用我的浏览器调试器工具查看生成的事件处理程序？

如果我将处理程序附加到document，有什么简单的方法可以捕获包含的内容div吗？我的文档比示例要复杂得多，我不能简单地依赖divand associateddata-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>
4

2 回答 2

3

这是一个处理函数，将<input>在两个<div>元素中的任何一个元素的“更改”事件中调用。

真正的事件处理程序是 jQuery 内部的东西，它检查事件目标并适当地分派。

如果你附加到<body>，你会这样做：

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

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

于 2013-02-01T22:02:00.987 回答
1

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

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

于 2013-02-01T22:08:06.800 回答