源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2022-09-06 16:19 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jQuery页面元素动态添加后绑定事件丢失方法,非 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不会丢失,但是在点击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的特性导致事件多次执行....完美!
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部