其实原因很简单,动态操作Dom元素后,原有的DOM树是没有这个元素的,所以只能进行对应的操作。
jQuery手册也提供了动态绑定的方法。
注册事件
jQuery1.7之后,jQuery用on统一了所有事件的处理方法。
简单事件
1 2 |
// 表示给$(selector)绑定事件,并且由自己触发,不支持动态绑定。 $(selector).on( 'click', function() {}); |
大多数时候,就是因为我们使用的是简单事件,所以无法进行动态操作。
注册事件委托
1 2 |
// 表示给$(selector)绑定代理事件,当必须是它的内部元素span才能触发这个事件,支持动态绑定 $(selector).on( 'click','span', function() {}); |
举个实际例子,我动态创建Dom元素后,点击后实现删除这个Dom元素,则可以这样写:
1 2 3 4 5 |
$('.menu_data').on('click','button',function(){ console.log($(this)); console.log('del'); $(this).remove(); }); |
当然,我们或许不是想删除按钮本身,而是获取到父级元素,则可以进一步调整:
1 |
$(this).closest('.topMenu').remove(); |
找到最近的一个祖先元素进行删除,自然也包括了按钮本身。
原创文章,作者:蓝洛水深,如若转载,请注明出处:https://blog.lanluo.cn/10787
评论列表(1条)
[…] jQuery动态操作Dom元素后,获取不到动态Dom元素的原因及解决办法 […]