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的输入调用click事件，如果动态添加输入，则无效。

在你的第二个，你是委托，但然后是同一个元素..

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

此处，这会将click事件调用到输入中id为doIt 的所有元素

你需要将它委托给最近的静态父容器..所以这将有效..

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

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

只有两个代理功能中的一个工作

2 个答案: