javascript - 将 jQuery 绑定(bind)到多个元素

Question

我正在用一些数据填充表格。我不知道该表包含多少行。每行都有一个链接，如果我单击该链接，就会显示该行的详细信息。

现在我希望将单个 jQuery 绑定(bind)到这些超链接中的每一个。此函数将接收每一行的唯一标识；并执行 ajax 以获取该行的更多数据:

这是 HTML 的样子(id 是一个实际数字):

<a id="view-id">
    <img src="/resources/assets/graphics/view.png" class="action-button" alt="View" title="View" />
</a>

我的 jQuery 函数看起来像这样(id 是一个实际数字):

$(document).on('click', '#view-id', function() {
    //Do Something
});

因为我不知道我会有多少行；我怎样才能将我的 jQuery 函数绑定(bind)到这些超链接元素中的每一个。

我在某处读到我可以执行以下操作:

$(document).on('click', '#view-1,#view-2,#view-3', function() {

但这似乎不是很有效。任何我应该朝哪个方向前进的想法。请记住，表格内容是通过 AJAX 调用加载的:)

谢谢。

Answer 1

为所有元素添加一个类，然后使用该类来定位 anchor 元素

<a id="view-id" class="view-id">
    <img src="/resources/assets/graphics/view.png" class="action-button" alt="View" title="View" />
</a>

然后

$(document).on('click', '.view-id', function() {
    //Do Something
});