Question

我有一个js，在ajax追加内容

之后事件不会激活

$(".item").mouseenter(function(){ $(this).children('.delete').show(); });

$(".item").mouseleave(function(){ $(this).children('.delete').hide(); });

$(".delete").click(function(){
    $(this).parent().hide(); });

$("#add").click(function(){
  action = 'addItem';
  $.ajax({
    type: "POST",
    url: "/echo/json/",
    data: 'action='+action,
    cache: false,
    success: function(json){
        $(".main").append('<div class="item"><div class="content"> content new </div><div class="delete"> delete </div></div>');
    }
  });
});

请查看http://jsfiddle.net/3j5L2/19/

上的jsfiddle

我如何确保无论添加多少项，都会触发mouseenter和mouseleave事件？

Answer 1

您需要event delegation使用jQuery's on method：

事件委托是指使用事件传播（冒泡）来处理DOM中更高级别的事件而不是事件源自的元素的过程。它允许我们为现在或将来存在的元素附加单个事件监听器。

$('.main').on('mouseenter', '.item', function() {
    ...
});

假设您的.main元素未动态创建，则此事件侦听器将分配给.main元素，并且仅在该特定后代发生事件时触发。

Answer 2

您需要event delegation才能将事件绑定到动态添加的元素：

事件委托允许我们将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有后代触发，无论这些后代现在是存在还是将来添加。

$(".main").on('click','.delete',function(){
   $(this).parent().hide();
});

jjery事件在ajax之后不会激活

2 个答案: