不使用 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');
    });
  });
});