1. 程式人生 > >Ajax動態拼接li並繫結事件

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