不使用 ID 重复元素的事件

问题

页面中有一系列重复元素，你需要知道发生了哪一个事件才能对该特定实例执行某些操作。

解

• 给所有共同元素一个共同的类
• 将事件侦听器应用于类。this inside 事件处理程序是发生事件的匹配选择器元素
• 从 this 开始遍历该实例的外部最重复容器
• 在该容器中使用 find() 来隔离特定于该实例的其他元素

HTML

<div class="item-wrapper" data-item_id="346">
   <div class="item"><span class="person">Fred</span></div>
   <div class="item-toolbar">
      <button class="delete">Delete</button>
   </div>   
</div>
<div class="item-wrapper" data-item_id="393">
   <div clss="item"><span class="person">Wilma</span></div>
   <div class="item-toolbar">
      <button class="delete">Delete</button>
   </div>   
</div>

jQuery 的

$(function() {
  $('.delete').on('click', function() {
    // "this" is element event occured on
    var $btn = $(this);
    // traverse to wrapper container
    var $itemWrap = $btn.closest('.item-wrapper');
    // look within wrapper to get person for this button instance
    var person = $itemWrap.find('.person').text();
    // send delete to server and remove from page on success of ajax
    $.post('url/string', { id: $itemWrap.data('item_id')}).done(function(response) {
      $itemWrap.remove()
    }).fail(function() {
      alert('Ooops, not deleted at server');
    });
  });
});