如何為多個項目創建一個javascript / jquery函數處理程序？

Question

我有如下的html：

<table class="table" id="subscriptions">
  <tbody id="subscriptions-tbody">
    <tr>
      <td>Item 1</td>
      <td><a href="#">delete</a></td>
    </tr>
    <tr>
      <td>Item 2</td>
      <td><a href="#">delete</a></td>
    </tr>
    <tr>
      <td>Item 3</td>
      <td><a href="#">delete</a></td>
    </tr>
  </tbody>
</table>

可以在此處動態添加項目。

現在，我應該創建一個函數，如果用戶單擊刪除，它將幫助我從列表中刪除元素。 看起來我應該：

1. 為列表中的每個項目分配一些唯一的ID（我有這樣的ID）-我應該在哪里保存它們？ 部分作為href嗎？
2. 一旦用戶單擊鏈接，我就應該阻止默認操作，並將控制權傳遞給我的函數（它將隱藏列表中的元素，並將POST請求發送到服務器），並以項目ID作為參數。

怎么做？

Answer 1

這是事件委托的完美案例。 將事件掛在table或tbody ，但僅當事件發生在刪除鏈接上時，才讓jQuery觸發它，如下所示：

$("#subscriptions-tbody").delegate("a", "click", function(event) {
    var row = $(this).closest('tr');

    // ...delete the row

    return false; // Don't try to follow the link
});

現場示例 | 資源

由於事件是掛在table或tbody ，因此添加和刪除行並不重要，因為事件是在table或tbody級別處理的。

在上面，我使用delegate是因為我喜歡明確的程度。 使用jQuery 1.7或更高版本，可以使用的方法太overloaded- on功能 ，而不是：

$("#subscriptions-tbody").on("click", "a", function(event) {
    var row = $(this).closest('tr');

    // ...delete the row

    return false; // Don't try to follow the link
});

現場示例 | 資源

請注意，參數的順序略有不同。

Answer 2

嘗試這個：

<table class="table" id="subscriptions">
  <tbody id="subscriptions-tbody">
    <tr data-id="1">
      <td>Item 1</td>
      <td><a href="#" class="delete">delete</a></td>
    </tr>
    <tr data-id="2">
      <td>Item 2</td>
      <td><a href="#" class="delete">delete</a></td>
    </tr>
    <tr data-id="3">
      <td>Item 3</td>
      <td><a href="#" class="delete">delete</a></td>
    </tr>
  </tbody>
</table>

您將為刪除錨定一個類，例如class="delete" ，並將data-id屬性放置到表行中，以便唯一地標識每個項目並知道要發送到服務器的ID。

現在，您的js可能如下所示：

$("#subscriptions-tbody").on('click', 'a.delete', function(e){

   var tr = $(e.currentTarget).closest('tr');

   //get the id
   var id = tr.attr("data-id");

   //make ajax request
   $.ajax({
      url: 'script.php',
      data: id,
      success: function(data) {

         //hide the item or remove
         tr.remove(); // tr.hide();

         // ajax callback
     }
   });
});

Answer 3

您應該將tr服務器端所需的信息（ 如id ）保留在data-屬性下 ，並使用.on()處理表中的事件。

html

<table class="table" id="subscriptions">
  <tbody id="subscriptions-tbody">
    <tr data-id="3">
      <td>Item 1</td>
      <td><a href="#" class="delete">delete</a></td>
    </tr>
    <tr data-id="5">
      <td>Item 2</td>
      <td><a href="#" class="delete">delete</a></td>
    </tr>
    <tr data-id="6">
      <td>Item 3</td>
      <td><a href="#" class="delete">delete</a></td>
    </tr>
  </tbody>
</table>

腳本

$("#subscriptions").on("click", "a.delete", function(e) {
    e.preventDefault();
    var row = $(this).closest('tr'),
        relatedId = row.data('id');

    $.post(...); // use relatedId here
    row.fadeOut(500, function(){
       row.remove();
    })
});

Answer 4

您可以將ID作為data-屬性存儲在控件或行上。 將Click處理程序委托給itleslf表，以解決使用on()方法運行代碼時不存在的動態添加的元素。

HTML：

<!-- class added to element -->
<a href="#" class="delecte-btn" data-id="3">delete</a>

JS

$('#subscriptions').on('click', '.delete-btn',function(evt){  
    evt.preventDefault();
    var id=$(this).data('id'), $row=$(this).closest('tr');
    /* send data to server and remove row on success*/
   $.post('serverUrl.php', { rowID: id, action :'delete'}, function(){
         $row.remove();
   })
})