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

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

Answer 2

如果您需要鱼，请使用：

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

如果您需要钓鱼竿，请阅读event delegation。

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

2 个答案: