jquery 动态生成的元素的事件无法绑定
2014-05-15 14:03
711 查看
今天遇到一个问题,由jQuery动态去生成一段html元素后,这些新生成的元素绑定的事件不起作用,后来查阅解决,废话不说,上代码,以下代码目的是点击button按钮,移除span区域。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript" src='http://code.jquery.com/jquery-1.9.1.js'></script>
</head>
<body>
<input type='button' id='creates' value='create'>
<div id='aDiv'>
<span>
<li><input type='button' name='a' value='1'></li>
<li>xxx</li>
</span>
<span>
<li><input type='button' name='a' value='2'></li>
<li>xxx</li>
</span>
</div>
<script type="text/javascript">
$(function(){
$('input[name=a]').each(function(){
$(this).click(function(){
$(this).parent().parent().remove();
});
});
$('input[name=a]').click(function(){
$(this).parent().parent().remove();
});
$('#creates').click(function(){
$('#aDiv').append('<span><li><input type=button name=a value=1></li><li>xxx</li></span>');
});
//注释以下代码,动态生成的Html元素点击button时不能够被移除
$('div').delegate('input[name=a]','click',function(){$(this).parent().parent().remove()});
})
</script>
</body>
</html>
总结:
1. click或者是...bind('click',function(){...});,click是bind('click',...)的简化形式,是JQuery扫描文档找出所有的$(‘input[name=a]’)元素,并把函数绑定到每个元素的click事件上,表明是现有页面上存在的元素,动态生成的元素不包括在内。
2.delegate方法,代理或者说是委托,实现原理是事件的冒泡,在指定的祖先元素中注册事件(delegate在特定元素上),元素事件触发,传播到这个元素然后进行筛选。可以在祖先元素中绑定事件,比如上面的div是祖先元素,而新生成的元素都是div的子元素,所以动态生成的元素的事件就可以绑定了。
delegate官网介绍:Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
官网网址:http://api.jquery.com/delegate/
转自:http://zhangzhaoaaa.iteye.com/blog/1897665
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript" src='http://code.jquery.com/jquery-1.9.1.js'></script>
</head>
<body>
<input type='button' id='creates' value='create'>
<div id='aDiv'>
<span>
<li><input type='button' name='a' value='1'></li>
<li>xxx</li>
</span>
<span>
<li><input type='button' name='a' value='2'></li>
<li>xxx</li>
</span>
</div>
<script type="text/javascript">
$(function(){
$('input[name=a]').each(function(){
$(this).click(function(){
$(this).parent().parent().remove();
});
});
$('input[name=a]').click(function(){
$(this).parent().parent().remove();
});
$('#creates').click(function(){
$('#aDiv').append('<span><li><input type=button name=a value=1></li><li>xxx</li></span>');
});
//注释以下代码,动态生成的Html元素点击button时不能够被移除
$('div').delegate('input[name=a]','click',function(){$(this).parent().parent().remove()});
})
</script>
</body>
</html>
总结:
1. click或者是...bind('click',function(){...});,click是bind('click',...)的简化形式,是JQuery扫描文档找出所有的$(‘input[name=a]’)元素,并把函数绑定到每个元素的click事件上,表明是现有页面上存在的元素,动态生成的元素不包括在内。
2.delegate方法,代理或者说是委托,实现原理是事件的冒泡,在指定的祖先元素中注册事件(delegate在特定元素上),元素事件触发,传播到这个元素然后进行筛选。可以在祖先元素中绑定事件,比如上面的div是祖先元素,而新生成的元素都是div的子元素,所以动态生成的元素的事件就可以绑定了。
delegate官网介绍:Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
官网网址:http://api.jquery.com/delegate/
转自:http://zhangzhaoaaa.iteye.com/blog/1897665
相关文章推荐
- jquery 动态生成的元素的事件无法绑定
- 解决jquery 动态生成的元素的事件无法绑定
- jquery 动态生成的元素的事件无法绑定
- jQuery:如何给动态生成的元素绑定事件?
- jQuery1.9之后使用on()绑定 动态生成元素的 事件无效
- jQuery 对动态生成元素进行事件绑定
- JQuery中动态生成元素的绑定事件(坑死宝宝了)
- Jquery对动态生成的元素绑定事件
- Jquery对动态生成的元素绑定事件
- jQuery:如何给动态生成的元素绑定事件?
- jquery动态添加元素无法触发绑定事件的解决方案
- jQuery使用on()绑定动态生成元素的事件无效的问题
- Jquery对动态生成的元素绑定事件
- 怎样给jQuery动态附加新的元素?那么怎样给新生成的元素绑定事件呢?
- jQuery使用on()方法给动态生成元素绑定事件
- jQuery:如何给动态生成的元素绑定事件?
- jquery 为动态生成元素绑定事件
- jQuery使用on()绑定动态生成元素的事件无效的问题
- JQuery给动态生成的DOM元素绑定点击事件
- [jquery] 给动态生成的元素绑定事件 on方法