在非现有元素中委托

Question

如果我这样做会发生什么：

$('#elementID').delegate('.findclick a', 'click', function()
{
   alert("test");
}

首先：

#elementID不存在于文档

中

或

#elementID存在，但.findclick a不存在。

真的很糟糕吗？或者它根本不重要？

Answer 1

它不会触发......所以没关系。

如果动态添加这些元素（使用.on()），它将触发并运行。

---

示例：

$(document).on('click', 'a.delegatedElementThatDoNotExistYet', function() {
    alert("Welcome");
});

没有任何事情发生，因为委托元素不存在，但是：

setTimeout(function() {
   $('body').html('<a class="delegatedElementThatDoNotExistYet">Hello!</a>');
},5000);

如果几秒钟后（我的例子中为5）我们添加委托的元素，它将触发警报。

此处的示例位于 JsFiddle

Answer 2

• 第一种情况并不是很糟糕，因为你不会将监听器附加到a 没有现有节点。
• 如果在某些时候你有.findclick a，那么第二个可能会变坏 #elementID的孩子，然后是你的。

function(){
   alert("test");
}

每次单击这些锚点时都会触发

。

关键是你将监听器绑定到父级，它负责处理子级

Answer 3

如果#elementID不存在则根本没有任何事情发生;该元素不存在，因此无法将事件处理程序绑定到它。

如果#elementID确实存在，那么恭喜你，你刚刚设置了event delegation。简而言之，事件委托是一种技术，您可以通过该技术在尚不存在的元素上设置事件处理程序，但是在页面加载后的某个时刻。

第二种情况正是.delegate() 预期的使用方式。

Answer 4

  

#elementID在文档中不存在

它创建一个函数，然后将其作为委托（为空）应用于结果集;所以没有任何反应（创建的函数最终将被垃圾收集）。

  

#elementID存在，但.findclick a不存在。

同样，它创建了一个函数，然后将该函数作为委托应用于结果集（它应该包含一个元素）。

现在，只要点击#elementID或其中的任何元素，jQuery就会遍历已注册的委托（应该只有一个）来查找匹配的选择器（'.findclick a'）。

如果您稍后在.findclick a下创建#elementID，则会在点击时开始运行您的功能。