jQuery頁面元素動態(tài)添加后綁定事件丟失方法,非 live
代碼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不會丟失,但是在點(diǎn)擊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ìn)去,這樣既可以用到j(luò)query語法繼續(xù)寫東西,也不會丟失綁定事件,更加不會因?yàn)閘ive的特性導(dǎo)致事件多次執(zhí)行....完美!
- jQuery 判斷頁面元素是否存在的代碼
- JQuery顯示隱藏頁面元素的方法總結(jié)
- jQuery獲得頁面元素的絕對/相對位置即絕對X,Y坐標(biāo)
- JQuery 簡便實(shí)現(xiàn)頁面元素數(shù)據(jù)驗(yàn)證功能
- jQuery獲取頁面元素絕對與相對位置的方法
- jquery獲得頁面元素的坐標(biāo)值實(shí)現(xiàn)思路及代碼
- jQuery實(shí)現(xiàn)動態(tài)控制頁面元素的方法分析
- jQuery使用之處理頁面元素用法實(shí)例
- jquery 查找iframe父級頁面元素的實(shí)現(xiàn)代碼
- jQuery實(shí)現(xiàn)鎖定頁面元素(表格列)
相關(guān)文章
jQuery使用getJSON方法獲取json數(shù)據(jù)完整示例
這篇文章主要介紹了jQuery使用getJSON方法獲取json數(shù)據(jù),結(jié)合完整實(shí)例形式分析了getJSON方法讀取與遍歷json文件數(shù)據(jù)的相關(guān)技巧,需要的朋友可以參考下2016-09-09推薦11款jQuery開發(fā)的復(fù)選框和單選框美化插件
web開發(fā)中所有的輸入控件中復(fù)選框和單選框的樣式是最難去設(shè)計的,因?yàn)椴煌臑g覽器及其操作系統(tǒng)對于樣式的渲染展現(xiàn)是不一樣的。2011-08-08jQuery插件HighCharts繪制2D帶Label的折線圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D帶Label的折線圖效果,結(jié)合實(shí)例形式分析了jQuery圖形繪制插件HighCharts實(shí)現(xiàn)折線圖效果的具體操作步驟與相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03JQuery的Ajax中Post方法傳遞中文出現(xiàn)亂碼的解決方法
這篇文章主要介紹了JQuery的Ajax中Post方法傳遞中文出現(xiàn)亂碼的解決方法,較為深入的分析了Ajax的post方法出現(xiàn)亂碼的原因,以及具體的解決方法,需要的朋友可以參考下2014-10-10jQuery插件FusionCharts實(shí)現(xiàn)的MSBar3D圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts實(shí)現(xiàn)的MSBar3D圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用FusionCharts載入xml數(shù)據(jù)繪制MSBar3D圖的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03JQuery插件jcarousellite的參數(shù)中文說明
這篇文章主要介紹了JQuery插件jcarousellite的參數(shù)中文說明,本文分別給出各個參數(shù)的含義,需要的朋友可以參考下2015-05-05jquery Tab 選項(xiàng)卡通用函數(shù)
用類作為選擇符雖然效率低點(diǎn)但是 可以多次重用 這個性質(zhì)不錯2010-04-04