Ajax动态拼接li并绑定事件

一、二对新增元素 再次进行绑定相应事件,例如在 Ajax 中的 success 返回函数中,再执行完新增元素的代码后进行绑定

success: $('body').append("<li id='new'> new Li </li>");
//这里统一用click事件为例
$('#new').click(function(){});

当然这种方式有一定的局限性,那么可以尝试第二种方式 

二、jquery中有诸多的绑定事件函数(具体的将在文章末尾进行简单的介绍)

//这里我们用到的是 on()函数/(当然你也可以用 live()函数进行绑定,他们之间的区别将在末尾介绍);
 

  $("body").on('click','#new',function()
  { 
     alert("捕获新增的id为 new 的 li 标签");    
  }  
  );

.on()函数的用于为指定元素的一个或多个事件绑定事件处理函数 
最主要的是 on()函数执行后新添加,绑定事件对其依然有效

//简单的演示on()
// 为div中的所有p元素绑定click事件处理程序
// 只有n2、n3可以触发该事件
$("div").on("click","p",function(event)
{    
    alert( $(this).text());
});
// 后添加的n6也可以触发上述click事件,因为它也是div中的p元素   
$("#n1").append('<p id="n6">上述绑定的click事件对此元素也生效!</p>');

以上则可以解决怎么用 jquery 绑定新增 DOM元素了!!

参考自https://blog.csdn.net/huangbao21/article/details/49821153

猜你喜欢

转载自blog.csdn.net/weixin_38383877/article/details/84132649