0

我有一个在 ajax 调用后使用 jQuery 动态呈现的表。

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

我有一个简单的 on(click 函数)，我想在单击按钮时触发它。我遇到的问题是我似乎无法将事件侦听器附加到按钮本身。

该行如下所示：

<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')});

想法？

4

1 回答 1

1

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

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

有关更多信息，请参考jQueryon文档的“委托事件”部分。

编辑 - 更多信息：

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

于 2013-05-01T02:02:28.797 回答