4

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

$('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>
4

2 回答 2

2

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

不，文档说选择器过滤了descendants，而不是您将事件挂钩的实际元素：

选择器

类型：String

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

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

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

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

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

于 2013-04-28T08:31:52.750 回答
2

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

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

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

在您的第二个中，您正在委派但随后委托给同一个元素..

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

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

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

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

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

于 2013-04-28T08:50:23.043 回答