萬盛學電腦網 >> 腳本專題 >> javascript >> jquery live()重復綁定的解決方法介紹
jquery live()重復綁定的解決方法介紹
本篇文章主要是對jquery中live()重復綁定的解決方法進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助
Query中.live()方法的使用方法 今天在寫代碼的時候遇到一個問題，直接上代碼看： $(function(){ $(".file").live("click",function(){ var task_name=$(this).text(); $("#selecting tbody").append("<trclass=gradeA'><tdclass='center'>"+task_name+"</td></tr>"); }); }); $(".file")對象是從後台傳過來的，click肯定是不行的，bind（）也無法獲取動態添加的元素，因此只能用live（），但是使用live（）遇到的問題是表格行會莫名其妙的添加了兩行，即綁定事件重復執行了，糾結了一上午終於找到了原因，先看live()方法的介紹。 live(type, [data],fn) 概述 jQuery給所有匹配的元素附加一個事件處理函數，即使這個元素是以後再添加進來的也有效。 這個方法是基本是的 .bind() 方法的一個變體。使用 .bind()時，選擇器匹配的元素會附加一個事件處理函數，而以後再添加的元素則不會有。為此需要再使用一次 .bind() 才行。比如說 <body> <div class="clickme">Clickhere</div> <body> 可以給這個元素綁定一個簡單的click事件： $('.clickme').bind('click', function() { alert("Bound handler called."); }); 當點擊了元素，就會彈出一個警告框。 然後，想象一下這之後有另一個元素添加進來了。 $('body').append('<div class="clickme">Another target</div>'); 盡管這個新的元素也能夠匹配選擇器".clickme" ，但是由於這個元素是在調用 .bind() 之後添加的，所以點擊這個元素不會有任何效果。 .live()就提供了對應這種情況的方法。如果我們是這樣綁定click事件的： $('.clickme').live('click', function() { alert("Live handler called."); }); 然後再添加一個新元素： $('body').append('<divclass="clickme">Anothertarget</div>'); 然後再點擊新增的元素，他依然能夠觸發事件處理函數。 事件委托 .live()方法能對一個還沒有添加進DOM的元素有效，是由於使用了事件委托：綁定在祖先元素上的事件處理函數可以對在後代上觸發的事件作出回應。 傳遞給 .live()的事件處理函數不會綁定在元素上，而是把他作為一個特殊的事件處理函數，綁定在 DOM樹的根節點上。在我們的例子中，當點擊新的元素後，會依次發生下列步驟： 1、生成一個click事件傳遞給<div> 來處理 2、由於沒有事件處理函數直接綁定在 <div>上，所以事件冒泡到DOM樹上 3、事件不斷冒泡一直到DOM樹的根節點，默認情況下上面綁定了這個特殊的事件處理函數。 4、執行由 .live()綁定的特殊的 click 事件處理函數。 5、這個事件處理函數首先檢測事件對象的 target 來確定是不是需要繼續。這個測試是通過檢測$(event.target).closest('.clickme') 能否找到匹配的元素來實現的。 6、如果找到了匹配的元素，那麼調用原始的事件處理函數。 由於只有在事件發生時才會在上面的第五步裡做測試，因此在任何時候添加的元素都能夠響應這個事件。 附加說明 .live()雖然很有用，但由於其特殊的實現方式，所以不能簡單的在任何情況下替換 .bind()。主要的不同有： 在jQuery 1.4中，.live()方法支持自定義事件，也支持所有的JavaScript 事件。在jQuery 1.4.1中，甚至也支持 focus 和 blue事件了（映射到更合適，並且可以冒泡的focusin和focusout上）。 另 外，在jQuery1.4.1中，也能支持hover（映射到"mouseenter mouseleave"）。然而在jQuery1.3.x中，只支持支持的JavaScript事件和自定義事件：click, dblclick, keydown, keypress,keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup. .live()並不完全支持通過DOM遍歷的方法找到的元素。取而代之的是，應當總是在一個選擇器後面直接使用 .live()方法，正如前面例子裡提到的。 當一個事件處理函數用 .live()綁定後，要停止執行其他的事件處理函數，那麼這個函數必須返回 false。 僅僅調用 .stopPropagation()無法實現這個目的。 參考 .bind() 方法可以獲得更多關於事件綁定的信息。 在jQuery 1.4.1中，你可以一次綁定多個事件給 .live() ，跟.bind() 提供的功能類似。 在jQuery 1.4中，data參數可以用於把附加信息傳遞給事件處理函數。一個很好的用處是應付由閉包導致的問題。可以參考 .bind()的討論來獲得更多信息。 參數 typeString 事件類型 data(可選) Object 欲綁定的事件處理函數 fn Function 欲綁定的事件處理函數 示例 HTML 代碼: <p>Clickme!</p> jQuery 代碼: $("p").live("click", function(){ $(this).after("<p>Anotherparagraph!</p>"); }); 描述: 阻止默認事件行為和事件冒泡，返回false jQuery 代碼: $("a").live("click",function() { return false; }); //根本原因在這，需要阻止默認事件行為和事件冒泡，在代碼後面添加return false;就OK了 描述: 僅僅阻止默認事件行為 jQuery 代碼: $("a").live("click", function(event){ event.preventDefault(); });javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved