欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  后端开发

javascript - jQuery给动态添加的元素绑定事件的问题?

程序员文章站 2022-05-06 07:50:46
...

javascript - jQuery给动态添加的元素绑定事件的问题?

上图中的代码块是描述有一个事件,触发之后在对应id="tb1"的标签后面生成html
在网页中的代码是这样的,如下图

javascript - jQuery给动态添加的元素绑定事件的问题?

标为2的是之前就有的,3是通过上面的事件添加上去的,那么问题来了;有个name=“plan_bt[]”的属性,这个属性绑定了一个事件,代码如下图

javascript - jQuery给动态添加的元素绑定事件的问题?

为什么添加后的html代码,不执行这个事件呢,点击选择按钮没有反应?刚开始是放在ready下的,应如何修改?

回复内容:

javascript - jQuery给动态添加的元素绑定事件的问题?

上图中的代码块是描述有一个事件,触发之后在对应id="tb1"的标签后面生成html
在网页中的代码是这样的,如下图

javascript - jQuery给动态添加的元素绑定事件的问题?

标为2的是之前就有的,3是通过上面的事件添加上去的,那么问题来了;有个name=“plan_bt[]”的属性,这个属性绑定了一个事件,代码如下图

javascript - jQuery给动态添加的元素绑定事件的问题?

为什么添加后的html代码,不执行这个事件呢,点击选择按钮没有反应?刚开始是放在ready下的,应如何修改?

绑定事情的时候,如果你这个 DOM 还没生成,那就不会绑定上也就是说

绑定事件只对绑定当时已经存在的DOM进行了绑定

如果需要对以后添加的 DOM 进行绑定,可以采用委托方式,背后原理是事件冒泡机制,用 jQuery 大概是这样实现

// 找到父对象,这里假设是 form
$("form:first").on("click", "name='plan_bt[]'", function(e) {
    var targets = $(e.target);
    // ...
});

name=“plan_bt[]” 是页面加载完成后才有的,所以之前对这个选择器的任何操作都会失效,因为找不到这个元素啊。

可以使用 on 进行事件委托式的绑定。

$(document).on('click', 'name=“plan_bt[]”', function(){
    // your code
});

其原理是把事件绑定到了一个已存在的父级元素上(不一定非要 document),触发参数1 click事件后通过 event 对象找到真正的触发者,如果这个触发者与参数2 name=“plan_bt[]”一致,就执行参数3 function(){}

建议题主搜索 事件冒泡 学习一下,另外jQuery最佳实践也可以看一下。

使用each和on就行了

楼主可以试试jquery的livequery插件。

可以考虑使用live或delegate

事件委托原理