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>

可以在那里动态添加项目。

现在，我应该创建该函数，这将帮助我从列表中删除元素，如果用户单击删除。看起来我应该：

为列表中的每个项目分配一些唯一的ID（我有这样的ID） - 我应该在哪里保留它们？部分为href？;
一旦用户点击链接，我应该阻止默认操作并将控制传递给我的函数（它将隐藏列表中的元素并将POST请求发送到服务器），并将item 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
});

Live Example | Source

由于事件隐藏在table或tbody上，因此添加和删除行无关紧要，因为事件是在table或tbody级别处理的

在上面，我使用的是delegate，因为我喜欢它是多么明确。使用jQuery 1.7或更高版本，您可以使用方式过载 - on function代替：

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

    // ...delete the row

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

Live Example | Source

请注意，参数的顺序略有不同。

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

您应该使用data- attributes在id上保留服务器端所需的信息（，如tr ），然后使用.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();
   })
})

如何为许多项创建一个javascript / jquery函数处理程序？

4 个答案: