动态生成DOM元素绑定click事件无效问题

在页面里,jq动态生成dom节点,该节点的click事件无效。

如,html里动态添加class名为.del的<a>,

js文件中:

$(‘.del‘).bind(‘click‘,fuction(){

  alert(‘sda‘);

})

不响应,

网上说可以用live代替bind事件,但在jq1.7版本开始,就取消了live事件,

解决方法: on()事件

代码改为:

$(document).on(‘click‘,‘.del‘,fuction(){

  alert(‘sda‘);

})

这样就搞定了

动态生成DOM元素绑定click事件无效问题

时间: 2024-12-29 10:16:45

动态生成DOM元素绑定click事件无效问题的相关文章

给DOM元素绑定click事件也有学问

最简单的莫过于使用click方法:名仕娱乐城 <input id="btn" type="button" value="BUTTON" onclick="alert(1)"/> <script> var btn = document.getElementById('btn'); btn.click(); </script> 所有浏览器都弹出了1.但是如果把input换成div呢? <d

jQuery对于动态生成的元素绑定无效的问题~~

问题:很多时候发现,对动态生成的元素绑定click事件是无效的- 原因:直接绑定到动态生成的元素是无效的,是因为Jquery扫描文档找出所有的$(‘’)元素,并把函数绑定到每个元素的click事件上,表明是现有页面上存在的元素,动态生成的元素不包括在内. 解决方法:代理或者说是委托on( ),实现原理是事件的冒泡,在指定的祖先元素中注册事件,元素事件触发,传播到这个元素然后进行筛选. 可以在祖先元素中绑定事件,比如div是祖先元素,而新生成的元素都是div的子元素,所以动态生成的元素的事件就可以

Angular如何给动态生成的元素绑定事件

在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听. 举例来说: angular.module('myapp',[]) .directive('myText',function(){ return{ restrict:'A', template:'<div ng-click="hello()">Hi everyone</div>', link:

如何用js为动态生成的元素绑定事件

今天在开发项目的时候,需要为用js动态生成的元素绑定一个click事件,但是在页面加载之前,这个元素不存在,没法获取这个元素,然后为其添加事件.查阅jquery api 发现可以用on()事件(注意:新版本的jquery已经把live()去除,现在用on()),为动态生产的元素绑定事件,然后触发该事件执行.比如下面一个例子: 假设我们要给div动态添加的span绑定click事件形成如下结果 x //做法如下: ("#choose_result").on("click&quo

append()方法生成的元素绑定的事件失效解决办法

我使用append()方法动态生成的a链接的click事件没有起效果,查找了资料,了解到,我使用的onclick方法绑定的事件对动态生成的元素是无效的,解决办法如下: 使用事件委托,并且要用on来绑定未来事件: $(父节点).on("事件","目标节点",function(){}) 我这里的例子是: $('#com').on("click",".comment",function(e){}) 问题解决了.

jquery动态添加的元素绑定的事件不生效的问题

我们可以通过 $(document).on('click', '#xxx', callback) 这种形式解决. 原因,一般情况下,我们是通过 $('#xxx').click(callback) 这种形式去绑定,这种绑定之所以生效是因为,我们程序加载 $(function(){}) 的时候绑定了回调,而动态添加上去的,我们并没有去绑定. 所以动态添加的元素,点击的时候并不会触发我们想要的效果.但是实际上,在我们点击的时候,还是产生了点击事件,只是这个事件没有被我们的预期回调处理,因为我们的回调没

JQuery不能触发动态生成的html的click事件

//错误code$( function() {         $(".addBtn").click( function() {         addNode($(this));     }).end(); }) //动态生成html function addNode(cur) {     if(cur.parent().has("ul").size() != 0) {         cur.parent().children("ul:first&qu

定位神器:1秒定位DOM元素绑定的事件代码的位置

1 VisualEvent github地址: https://github.com/DataTables... 2 使用教程 打开http://sprymedia.co.uk/Visual...,然后将visual Event连接拖动到浏览器的书签栏上 随便打开一个页面,然后点击VisualEvent书签后,页面就变成这样了.鼠标移动到蓝色或者黄色边框的元素上,相应得逻辑代码就会出现.截图左下角蓝色长条上有一些有用的信息,最左边有个关闭的按钮. 3. 最后 VisualEvent并不是万能的,

动态生成的元素绑定KindEditor

/* 初始化富文本编辑框配置项 */ var options = { filterMode : false, allowImageUpload : true, items : [ 'source', '|', 'undo', 'redo', '|', 'preview','cut', 'copy', 'paste', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'inser