Question

我有一个在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')});

想法？

Answer 1

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

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

有关详情，请参阅jQuery's on docs的“委派活动”部分。

修改 - 更多信息：

如果您使用原始方法，jQuery将立即找到与选择器匹配的所有项目，并为每个添加一个点击处理程序。但是在该调用之后添加的任何东西都没有处理程序。如果使用委托事件方法，则可以在“DOM中更高的位置”添加单个处理程序，并且该处理程序将处理所有匹配的DOM元素，无论它们何时被添加到DOM。这样做的原因是大多数事件都会上升到DOM树，直到处理程序告诉事件停止传播。所以jQuery on代码检查目标是否匹配并触发处理程序。

Jquery选择不按预期工作

1 个答案: