Ajax動態拼接li並繫結事件
阿新 • • 發佈:2018-11-17
一、二對新增元素 再次進行繫結相應事件,例如在 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