将jQuery绑定到多个元素

Question

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

现在，我希望将单个jQuery绑定到每个超链接。此函数将接收每一行的唯一id；并执行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函数绑定到这些超链接元素中的每一个。

我在某个地方读到我可以做以下几件事：

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

但这似乎不太有效。我该往哪个方向走。请记住，表内容是通过AJAX调用加载的：)

谢谢。

Answer 1

将类分配给要绑定的元素，并使用选择器中的类名选择该类的所有元素。$(this)将引用单击的对象，此时您可以执行$(this).id来获取单击对象的ID。

HTML：

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

JavaScript：

$(document).on('click', '.class-name', function() {
    // 'this' references the item clicked.
    alert(this.id + ' is the ID clicked.');
});

Answer 2

向所有元素中添加一个类，然后使用该类来锁定锚元素。

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

Answer 3

为什么不向每个元素添加一个类并使用类选择器绑定它们呢？

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

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