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(); 
});