理解关于相对选择器的方法的jQuery（事件委托）

Question

我需要一些了解jQuery的.on()方法的建议。我使用.on()的情况之一就是：

我想将一个clickhandler附加到一个已经不在标记中的元素。

$('#somediv').on('click', '#trigger', function() {
    // an awesome click event
});

$('#somediv').append('<span id="trigger">Click</span>');

我现在的问题是，如果#somediv也不会出现在标记中，该怎么办？我将使用.on()方法应用哪个父选择器。我可以使用$('body').on()，还是有特定的规则来附加它。

由于

Answer 1

你做对了，最好在事件委托时找到DOM中最接近的父对象。使用最接近的父限制jQuery必须在委托之前检查。

对于例如：让我们假设我们将click处理程序绑定到#trigger元素的body标签，该元素将在以后动态包含

$('body').on('click', '#trigger', function() {
   // an awesome click event
});

$('body').append('<span id="trigger">Click</span>');

在上面的示例中，jQuery将click处理程序绑定到body标记，并在内部检查单击的元素是否与选择器匹配。请注意，每次在正文中单击任何位置时，都会执行jQuery .on，验证是否从#trigger elemenet触发click事件并调用事件处理程序。

这就是为什么最好在绑定时找到并将事件委托给DOM中最接近的父级。

话虽如此，更好的方法是在将元素注入DOM后直接绑定事件。详细了解选择哪种方法： event delegation vs direct binding when adding complex elements to a page