情景

如上面的模态框，点击左边的添加按钮，会把整个div添加到右边，点击右边的删除按钮，则把整个div添加回左边，就类似于穿梭框的样子。

不难，下面是一开始想到的方案：

$('#SelectedDevice button').click(function(){$(this).text('添加');let this_device = $(this).parent().parent();this_device.remove();//从待选设备框中移除$('#DeviceToBeSelected').append(this_device);autoHeight('DeviceToBeSelected', 'SelectedDevice');//左右div高度自适应
});

功能是实现了，但是发现一个问题，就是，我把左边的 div.card 添加到右边后，再点击 button 按钮，触发不了对应的事件了。凡是动态添加的元素都出现了这个情况，而页面中原先写死的却不受影响。

看了一下文档，找了一下资料，问题产生的原因应该是这个：

jquery的事件绑定在页面加载时就已经完成，所以之后动态添加的class将无法绑上事件。

解决方案

旧版本的JQuery说是用 $().live() 。
新版本的JQuery则是用 $('父元素').on('click','子元素',function(){})。
即JQ通过绑定父元素来监听其下面的子元素是否发生 click 事件。这个父元素一定要写死的，没有的话，就绑定在 <body> 上好了。

方案代码：

$('#SelectedDevice').on('click','button',function(){$(this).text('添加');let this_device = $(this).parent().parent();this_device.remove();//从待选设备框中移除$('#DeviceToBeSelected').append(this_device);autoHeight('DeviceToBeSelected', 'SelectedDevice');
});

【JQ】动态添加的元素无法触发绑定事件的解决办法相关推荐

html 元素响应,jQuery动态添加html元素后，响应事件的问题记录
var li = " " + "" + // 缩略图点击部分 index='" + i + "' "" + " ...
jq append添加的元素click获取不到的解决方法
移动端手机ios网页,apppend添加html class名用 on()方法没效果解决方案:在html里面给需要点击的元素加一个οnclick="javascript:void(0)&q ...
中文输入法不触发onkeyup事件的解决办法
2019独角兽企业重金招聘Python工程师标准>>> 这两天做一个需要实时监控文本框输入的功能,碰到了中文输入法无法触发onkeyup事件的恶心问题. 具体表现是这样的: 当监听一 ...
js动态添加的元素，动作绑定
$(document).on("click",".name",function(){ //code; })
jQuery给动态添加的元素绑定事件的方法
jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这 ...
动态添加html元素绑定事件,关于javascript：jQuery如何将onclick事件绑定到动态添加的HTML元素...
本问题已经有最佳答案,请猛点这里访问. 我想将onclick事件绑定到用jquery动态插入的元素但它从不运行绑定函数.如果您能指出这个示例为什么不起作用,以及如何使它正常运行,我将非常高兴: /p ...
jQuery 为动态添加的元素绑定事件
在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...
JavaScript实现动态添加的元素添加点击事件
在页面开发过程中常常遇到需要动态添加元素,然后给这一元素绑定相关事件的情况,这种情况下一般需要给元素加上相关属性,然后写这些元素的事件函数即可.动态添加的元素怎么绑定事件呢? 原生JavaScript ...
js动态添加页面元素
在刚完成的作业中,使用的动态添加页面元素的代码: function add(name) {$("#list").append(" <a class='a' href ...

【JQ】动态添加的元素无法触发绑定事件的解决办法

情景

解决方案

【JQ】动态添加的元素无法触发绑定事件的解决办法相关推荐

最新文章

热门文章