jQuery页面元素动态添加后绑定事件丢失方法,非 live
代码1:以此方法绑定的input框事件,在通过add按钮后用jquery绑定的事件alert就会丢失
<inputtype="button"value="Add"name="test_but"/>
<divid="test_div"><inputname="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,或者多次弹出提醒框,刷新页面后就好了,但是多次操作后还是会这样
<inputtype="button"value="Add"name="test_but"/>
<divid="test_div"><inputname="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:解决之道....
<inputtype="button"value="Add"name="test_but"/>
<divid="test_div"><inputname="test_input"onchange="alert_val(this)"/></div>
<script>
functionalert_val(obj){
alert($(obj).val());
}
$('input[name=test_but]').click(function(){
$('input[name=test_input]').clone().appendTo($('#test_div'));
});
</script>
通过js原生态的onchange事件,把对象本身传递进去,这样既可以用到jquery语法继续写东西,也不会丢失绑定事件,更加不会因为live的特性导致事件多次执行....完美!
热门推荐
1 训练狗狗憋尿
2 狗狗追踪训练
3 狗狗训练要多少钱
5 深圳狗狗训练
6 训练狗狗唤回
7 狗狗叫怎么训练
8 狗狗训练班
10 狗狗社会化训练
11 狗狗叫回训练
12 广州狗狗训练学校
13 狗狗训练躺下
14 狗狗随行训练
15 训练狗狗巡回
16 狗狗要怎么训练
17 狗狗喂食训练
18 训练狗狗躺下