將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

向所有元素添加一個類，然后使用該類定位定位元素

<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元素的多個元素結合使用以綁定事件。