Jquery同一頁面上的事件的多個實例

Question

我正在處理具有重複搜索塊功能的頁面。我需要能夠刪除這些額外的搜索塊。我有一個鏈接，附加一個點擊事件，以刪除它。這似乎在第一個實例上工作，但似乎不希望工作後的每個重複實例。

任何解釋爲什麼這不起作用？我仍然相當新的jQuery。

這是代碼：

$('.k-item').click(function(){ 

     var $searchblock = $('#search-block').html(); 
     var $addsearchblock = '<div class="additional-search-block"></div>'; 
     $('.additional-search-block').html($searchblock).attr('class', 'added-search').append($addsearchblock); 
    }); 

$('.remove').click(function(e){ 
       e.preventDefault(); 
       //alert('hello'); 
       $(this).parent().hide(); 
      }); 

這是我的工作頁面：

http://www.mniac.com/ELRN5/search-template.html

Answer 1

如果你需要一條魚，然後使用：

$('<selector of parent of elements you want to attach events to>').on('click', '.remove', function(e) { 
    e.preventDefault(); 
    $(this).parent().hide(); 
}) 

如果你需要一個釣竿，然後閱讀event delegation。

Answer 2

當您綁定使用.click()之類的，它只是結合目前的元素綁定時的DOM。如果您希望他們使用動態添加的元素，則需要使用.on()以及委派的事件。

$(document).on('click', '.remove', function(e){ 
    e.preventDefault(); 
    $(this).parent().hide(); 
}); 

如果您有接近所有目標元素比document那麼你應該綁定到該元素，而不是一個父元素。鑑於您的示例頁面：

$('#content').on('click', '.remove', function(e){ 
    e.preventDefault(); 
    $(this).parent().hide(); 
});