jQuery中delegate方法如何實作Ajax請求綁定事件不遺失詳解

給元素綁定click事件後，遇到一個問題：當執行一些ajax請求，再次呼叫此頁面，裡面的這個click事件就失效了

比如說：我的分頁是一個ajax請求但我點下一頁時後生成的元素a就沒有了click事件了

自己做專案時遇到的問題：

　　目的：批次刪除複選框，當點擊刪除的時候觸發利用jquery綁定在按鈕上的onclick事件從而獲取所有複選框的值，

　　1.第一次直接smarty注入調取頁面時沒問題，當根據條件查詢(Ajax實作)，再次呼叫頁面列出記錄時，點選事件失效 

#原因：ajax載入內容是在$(document).ready()之後的操作，這個時候給綁定函數的時候，找到的元素集合中還不包含ajax載入的內容，所以原來的沒有問題，後面載入的就沒有綁定

##最終解決方法：

1.利用jQuery的delegate()方法

#2.利用原生js把取得複選框的值寫入提交驗證函式裡，

<form method="post" action="channel_code_manage.php?act=removeall" name="listForm" id="deleted" class="fn-mt20" onsubmit="
return
 checkbox();">

　　有值，驗證通過，把值賦給一個隱藏域value

#　　無值，返回

function checkbox() {
       var compatibility = "",input = document.getElementsByTagName("input"),value;
       for (var i = 0; i < input.length; i++) {
           if (input[i].type == "checkbox") {
               if (input[i].checked) {
                   value = input[i].value;
                   if(value!=&#39;on&#39;){   　　　　　　　　　　　　　　　　给全选按钮value设置为on  排除此选项
                       compatibility += value + ","; 　　　　　　　　　　拼接字符串
                   }}

}
       }
       compatibility = compatibility.substring(0,compatibility.lastIndexOf(","));  //删除最后的，

 

if(!compatibility){　　//如果字符串为空 ，返回false
           alert(&#39;请选择要删除的记录&#39;);
           return false;
       }else{
           document.getElementById(&#39;getvalues&#39;).value=compatibility;   //如果字符串不为空 把值赋值给隐藏于提交
           confirm(&#39;确定批量删除？&#39;);
       }

 

}

#解決方案：##1. 在ajax請求成功之後重新綁定事件

2

. 用jquery的delegate(sel,[type],[data],fn)方法
    live()方法已棄用

$(document).delegate('a', 'click', function() { blah() })   解決綁定事件Ajax請求後不失效#指定的元素（屬於

被選元素的子元素

）添加一個或多個事件處理程序，並規定當這些事件發生時運行的函數。 使用 delegate() 方法的事件處理程序適用於目前或未來的元素（例如由腳本建立的新元素）。

參數：

selector:

選擇器字串，用於過濾器觸發事件的元素。 

type:

附加到元素的一個或多個事件。由空格分隔多個事件值。必須是有效的事件。

data:

傳遞到函數的額外資料

fn:

當事件發生時運行的函數

$(function(){
$('#deleted').delegate("button",'click',function(){  被选元素的子元素---->deleted为form 表单 button为表单中的按钮              
checked = [];            
$('input:checkbox:checked').each(function() {                
checked.push($(this).val());            
});            
$('#getvalues').val(checked);  //给隐藏域设置属性        
})
})

已完美解決問題，呵呵！

#延伸：

在舊版的jQu​​ery中，當需要對頁面上某個由ajax載入的某段片段的頁面內容回應事件時，可以使用live函數來回應其事件，例如：$('a').live('click', function() { blah() });

在較新版本的jQuery中，live函數已經被棄用了，

那如何在新版本中實作live函數的功能呢，也就是當由ajax方式載入了頁面片段後，這個頁面片段中的內容如何回應相關的事件呢？

方法有好幾種，本文只提供簡單的兩種：

#一種是直接導入jquery-migrate這樣就能讓live函數能夠使用，但不對效能做優化。
另一種是使用delegate函數來實作live的功能

• $(document).delegate('a', 'click', function() { blah() });

以上是jQuery中delegate方法如何實作Ajax請求綁定事件不遺失詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！