只有两个委托函数之一工作

Question

我正在尝试委派一个点击操作，但它只能以这种方式工作：

$('input#doIt').on('click',  { name: "Karl" } , function(event){
    alert(event.data.name);

});

但不是这样：

$('input').on('click', '#doIt' , { name: "Karl" } , function(event){
    alert(event.data.name);
});

根据文档，它们应该是相同的。第一个只绑定到一个元素，而第二个绑定到两个，但是选择器将其减少为一个。任何人都可以对此有所了解吗？

这里是html

<div class="row">
     <div class="formLabel">Add Node:</div>
     <div class="formInput"> <input type="text" name="addNote"></div>
  </div>
<div id="goTo" class="row"><input id="doIt" type="submit" value="Submit"></div>

Answer 1

根据文档，它们应该是相同的。

不，the documentation says 选择器过滤器后代，而不是您将事件挂钩的实际元素：

选择器

输入：String

一个选择器字符串，用于过滤 触发事件的选定元素的后代。

（我的重点）在您的情况下，input 与 id doIt 不是后代，您将事件直接挂钩。

您可以通过将事件挂钩到 doIt input 的祖先上来使用委托表单，可能在任何包含您的 div.row 元素上：

$("selector for the container of the rows").on('click', '#doIt', {name: "Karl"}, function(event) {
    alert(event.data.name);
});

（我假设您有充分的理由为此使用委托，而不是直接挂钩到 doIt 元素——例如，该元素可能会被频繁地删除和重新创建。）

Answer 2

第一个正在工作，因为您使用的是直接事件，而不是将其委托给它的任何父元素

$('input#doIt').on('click',  { name: "Karl" } , function(event){

这里，你只是为 id 为doIt 的输入调用点击事件，如果输入是动态添加的，这将不起作用..

在你的第二个中，你正在委派但随后是同一个元素..

$('input').on('click', '#doIt' , { name: "Karl" } , function(event){
  alert(event.data.name);
});

在这里，这将对所有 id 为 doIt 的元素调用点击事件在不正确的输入中

你需要将它委托给最近的静态父容器..这样才能工作..

 $('div#goTo').on('click', 'input#doIt' , { name: "Karl" } , function(event){
   ...

注意：您有两个具有相同 ID doIt 的元素，这是无效的 HTML。将一个更改为类。我在上面的代码中将输入更改为类。罢工>