同一个页面上的多个事件实例

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

如果你需要一个钓竿，那么阅读事件委托。

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