Jquery同一页面上的事件的多个实例
问题描述:
我正在处理具有重复搜索块功能的页面。我需要能够删除这些额外的搜索块。我有一个链接,附加一个点击事件,以删除它。这似乎在第一个实例上工作,但似乎不希望工作后的每个重复实例。Jquery同一页面上的事件的多个实例
任何解释为什么这不起作用?我仍然相当新的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();
});
这是我的工作页面:
答
如果你需要一条鱼,然后使用:
$('<selector of parent of elements you want to attach events to>').on('click', '.remove', function(e) {
e.preventDefault();
$(this).parent().hide();
})
如果你需要一个钓竿,然后阅读event delegation。
答
当您绑定使用.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();
});