1

我有如下的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 作为参数。

怎么做？

4

4 回答 4

4

这是事件委托的完美案例。将事件挂在tableor上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
});

实例| 来源

因为事件与tableor挂钩，所以tbody添加和删除行并不重要，因为事件是在tableortbody级别处理的。

在上面，我使用delegate它是因为我喜欢它的显式程度。使用 jQuery 1.7 或更高版本，您可以改用 way-too-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
});

实例| 来源

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

于 2012-12-08T14:15:18.133 回答
1

试试这个：

<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
     }
   });
});
于 2012-12-08T14:19:11.690 回答
1

您应该将服务器端所需的信息（如id）保留在trwithdata-属性上，并用于.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();
    })
});
于 2012-12-08T14:20:01.890 回答
1

您可以将 ID 作为data-属性存储在控件或行上。on()将单击处理程序委托给表 itleslf 以说明在使用方法运行代码时不存在的动态添加的元素。

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();
   })
})
于 2012-12-08T14:23:47.987 回答