jQuery动态操作Dom元素后，获取不到动态Dom元素的原因及解决办法

蓝洛水深 • 2022年3月16日上午11:22 • 系统, 网站 • 1928 views

其实原因很简单，动态操作Dom元素后，原有的DOM树是没有这个元素的，所以只能进行对应的操作。

jQuery手册也提供了动态绑定的方法。

注册事件

jQuery1.7之后，jQuery用on统一了所有事件的处理方法。

// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
$(selector).on( 'click', function() {});

1 2	// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。 $(selector).on( 'click', function() {});

大多数时候，就是因为我们使用的是简单事件，所以无法进行动态操作。

// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( 'click','span', function() {});

1 2	// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定 $(selector).on( 'click','span', function() {});

举个实际例子，我动态创建Dom元素后，点击后实现删除这个Dom元素，则可以这样写：

$('.menu_data').on('click','button',function(){
        console.log($(this));
        console.log('del');
        $(this).remove();
      });

$('.menu_data').on('click','button',function(){

console.log($(this));

console.log('del');

$(this).remove();

});

当然，我们或许不是想删除按钮本身，而是获取到父级元素，则可以进一步调整：

$(this).closest('.topMenu').remove();

1	$(this).closest('.topMenu').remove();

找到最近的一个祖先元素进行删除，自然也包括了按钮本身。

原创文章，作者：蓝洛水深，如若转载，请注明出处：https://blog.lanluo.cn/10787