jQuery頁面元素動態(tài)添加后綁定事件丟失方法,非 live
更新時間：2016年06月16日 14:16:16 作者：zbasic
這篇文章主要介紹了jQuery頁面元素動態(tài)添加后綁定事件丟失方法,非 live 的相關(guān)資料,非常不錯，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧
代碼1: 以此方法綁定的input框事件,在通過add按鈕后用jquery綁定的事件 alert就會丟失
<input type="button" value="Add" name="test_but" />
<div id="test_div"><input name="test_input"/></div>
<script>
$('input[name=test_input]').change(function(){
alert($(this).val()) ;
});
$('input[name=test_but]').click(function(){
$('input[name=test_input]').clone().appendTo($('#test_div'));
});
</script>
代碼2: 以jquery的live方法綁定change事件,alert不會丟失,但是在點擊add時有可能多次添加input,或者多次彈出提醒框,刷新頁面后就好了,但是多次操作后還是會這樣
<input type="button" value="Add" name="test_but" />
<div id="test_div"><input name="test_input" onchange="alert_val(this)"/></div>
<script>
$('input[name=test_input]').live('change',function(){
alert($(this).val()) ;
});
$('input[name=test_but]').click(function(){
$('input[name=test_input]').clone().appendTo($('#test_div'));
});
</script>
代碼3: 解決之道....
<input type="button" value="Add" name="test_but" />
<div id="test_div"><input name="test_input" onchange="alert_val(this)"/></div>
<script>
function alert_val(obj){
alert($(obj).val());
}
$('input[name=test_but]').click(function(){
$('input[name=test_input]').clone().appendTo($('#test_div'));
});
</script>
通過js原生態(tài)的onchange事件,把對象本身傳遞進去,這樣既可以用到j(luò)query語法繼續(xù)寫東西,也不會丟失綁定事件,更加不會因為live的特性導(dǎo)致事件多次執(zhí)行....完美!
相關(guān)文章
jQuery Validate 數(shù)組 全部驗證問題
這篇文章主要介紹了jquery validate 數(shù)組 全部驗證問題及解決辦法，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-01-01
jquery地址欄鏈接與a標簽鏈接匹配之特效代碼總結(jié)
jquery如何獲取地址欄參數(shù)，改變地址欄樣式，接下來，通過本篇文章給大家分享jquery地址欄鏈接與a標簽鏈接匹配之特效代碼總結(jié)，需要的朋友可以參考下2015-08-08
Jquery下的26個實用小技巧(jQuery tips, tricks & solutions)
前段時間發(fā)布了Jquery類庫1.4版本，使用者也越來越多，為了方便大家對Jquery的使用，下面列出了一些Jquery使用技巧。2010-03-03
animate動畫示例(淚奔的小孩)及stop和delay的使用
實現(xiàn)原理：停止動畫，當一個元素有一個動畫隊列時，停止的是當前動畫，緊接著執(zhí)行下一個動畫，具體代碼如下，感興趣的朋友可以參考下哈，希望對你學(xué)習(xí)jquery動畫有所幫助2013-05-05
JQuery自定義事件的應(yīng)用 JQuery最佳實踐
本文主要介紹JQuery框架里面支持的自定義事件模型，通過實例說明什么時候可以利用事件模型進行面向?qū)ο蟮腏S編程，以及利用“帶命名空間的事件處理函數(shù)”來避免unbind時影響別的事件訂閱。2010-08-08
jquery mobile實現(xiàn)可折疊的導(dǎo)航按鈕
這篇文章主要為大家詳細介紹了jquery mobile實現(xiàn)可折疊的導(dǎo)航按鈕，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
本文給大家收集整理了jquery遍歷節(jié)點的方法，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-05-05
本文主要對jQuery實現(xiàn)6位數(shù)字密碼輸入框的大概思路、實現(xiàn)代碼進行詳細介紹，具有一定的參考價值，需要的朋友一起來看下吧2016-12-12
獲得內(nèi)容的三個簡單實用的方法text()、html() 以及 val()、獲取屬性的attr()方法，下面有個不錯的示例，感興趣的朋友可以參考下2013-12-12
jQuery實現(xiàn)的經(jīng)典豎向伸縮菜單效果代碼
這篇文章主要介紹了jQuery實現(xiàn)的經(jīng)典豎向伸縮菜單效果代碼,通過jQuery響應(yīng)鼠標事件遍歷頁面元素實現(xiàn)伸縮菜單的效果,非常簡單實用,需要的朋友可以參考下2015-09-09