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

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

<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 2

将一个类分配给要绑定的元素，并使用选择器中的类名选择该类的所有元素。 $（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 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
});

Answer 4

$('#abc, #xyz, #pqr').bind('click', function () {
      alert("hello");
});

使用带有id，OR元素的多个元素的逗号来绑定事件。

将jQuery绑定到多个元素

4 个答案: