jquery选择不按预期方式工作

我有一个表，使用jQuery动态调用ajax后呈现。jquery选择不按预期方式工作

该表看起来正确，并在每一行中都有一个按钮。

我有一个简单的（点击功能），我想点击按钮时触发。我的问题是，我似乎无法将事件监听器附加到按钮本身。

行看起来是这样的：

<tr> 
    <td>04/01/2013</td> 
    <td>LastName, FirstName</td> 
    <td>Success looks like this. and other stuff</td> 
    <td> 
     <button id="serialID1" class="btn btn-small formViewBtn" type="button">View</button> 
    </td> 
</tr>

如果我使用这样的功能：

$("#tableConversation tbody").on("click", function(){alert('hi mom')});

它的工作原理。

但是，这不，我不明白为什么不：

$("#tableConversation tbody button").on("click", function(){alert('hi mom')});

无论是做这个的：

$("#tableConversation tbody .formViewBtn").on("click", function(){alert('hi mom')});

想法？

来源

2013-05-01 manisha

由于您正在向表中动态添加内容，因此“委托事件”可能是此处最好的方法。

$("#tableConversation").on("click", "tbody button", function(){alert('hi mom')});

欲了解更多信息，请参考jQuery's on docs的“委托事件”部分。

编辑 - 更多信息：

如果您使用原来的方法，jQuery将立即发现所有的选择相匹配的项，并添加点击处理程序他们每个。但是在调用之后添加的任何东西都不会有处理程序。如果使用委托事件方法，则可以“在DOM中更高”添加单个处理程序，并且该处理程序将处理所有匹配的DOM元素，而不管它们何时添加到DOM。这个工作的原因是大多数事件都会在DOM树上出现，直到处理程序告诉事件停止传播。因此，jQuery on代码检查目标是否匹配并触发处理程序。

来源

2013-05-01 02:02:28

完美的作品，谢谢！这个概念对我来说还是有点松动的。我发现了另一篇文章，建议使用event.target.getAttribute（'type'）=='button'，它可以工作，但是你的方法更直接。有一些关于后代的行为我不太清楚。 – manisha 2013-05-01 03:41:20

噢，好的。这就解释了为什么当我将它连接到tbody时它会发射两次。非常感谢！ – manisha 2013-05-01 03:59:00

jquery选择不按预期方式工作

回答

相关问题