AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

jQuery页面元素动态添加后绑定事件丢失方法,非 live

51自学网 http://www.wanshiok.com
jquery绑定事件live,jquery元素动态添加

代码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原生态的onchange事件,把对象本身传递进去,这样既可以用到jquery语法继续写东西,也不会丢失绑定事件,更加不会因为live的特性导致事件多次执行....完美!


jquery绑定事件live,jquery元素动态添加  
上一篇:jQuery on()方法绑定动态元素的点击事件实例代码浅析  下一篇:JSON字符串和对象相互转换实例分析