jQuery 为动态添加的元素绑定事件

在使用jquery的方式为元素绑定事件时，我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件。像需要用ajax的方式请求远程数据来动态添加页面元素时，显然以上几种绑定事件的方式是无效的，具体写法如下图。

$(selector).bind(event,data,function)
$(selector).click(function)$("#searchMoveVideoResult ul li").bind("click",function(){$(this).css("border","5px solid #000");
});
$("#searchMoveVideoResult ul li").click(function(){$(this).css("border","5px solid #000");
});

为动态添加的元素绑定事件有以下几种方式：

1.delegate()：向匹配元素的当前或未来的子元素附加一个或多个事件处理器

$(selector).delegate(childSelector,event,data,function)示例：$("#searchMoveVideoResult").delegate("ul li","click",function(){$(this).css("border","5px solid #000");
});

2.live()：为当前或未来的匹配元素添加一个或多个事件处理器（jquery1.8版本以前推荐使用该方法；jquery1.8版本之后就不建议使用了，我试了下，也是无效的，所以高版本的jquery推荐使用on()方法绑定事件。）

$(selector).live(event,data,function)$("#searchMoveVideoResult ul li").live("click",function(){$(this).css("border","5px solid #000");
});

3.on()：适用于当前及未来的元素（比如由脚本创建的新元素）

$(selector).on(event,childSelector,data,function,map)$("#searchMoveVideoResult").on("click","ul li",function(){$(this).css("border","5px solid #000");
});

　　来源：https://blog.csdn.net/xiaozhi_2016/article/details/52184328

转载于:https://www.cnblogs.com/fogwang/p/8670402.html

jQuery 为动态添加的元素绑定事件相关推荐

jQuery给动态添加的元素绑定事件的方法
jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这 ...
动态添加html元素绑定事件,关于javascript：jQuery如何将onclick事件绑定到动态添加的HTML元素...
本问题已经有最佳答案,请猛点这里访问. 我想将onclick事件绑定到用jquery动态插入的元素但它从不运行绑定函数.如果您能指出这个示例为什么不起作用,以及如何使它正常运行,我将非常高兴: /p ...
js动态添加html元素绑定事件,JS实现动态添加DOM节点和事件的方法示例
本文实例讲述了JS实现动态添加DOM节点和事件的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: /p> "http://www.w3.org/TR/xht ...
jquery append 动态添加的元素事件on 不起作用的解决方案
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...
html 未来元素绑定事件,jquery on如何给未来元素绑定事件？
我们要想在一个元素上绑定一个事件,那么这个元素必须先存在,也就是绑定事件动作前就已有这个元素. 这是一个给元素绑定任何事件的前提. 如果按照这种思路走,那么"给未来元素绑定事件"将 ...
jquery每次动态加载dom,绑定事件会多一次,
jquery绑定事件,每次动态加载dom,绑定的事件会加1,比如动态加载dom5次,点那个点击事件会弹出5次解决办法就是在每次绑定之前解绑定. $('.seek-footer .btn1').off ...
Angularjs 动态添加指令并绑定事件
先说使用场景,动态生成DOM元素并绑定事件,非常常见的一种场景,用jq实现效果: http://jsbin.com/gajizuyuju/edit?html,js,output var count=0 ...
给动态动态生成元素绑定事件不生效解决方法
如题:动态生成的元素绑定事件后没有生效,或者说操作时没有效果 js,jq动态生成的元素,在绑定前,先一定要确认,执行绑定操作的时候,该元素是不是已经存在在页面上,也就是html上了,假如执行绑定的时候 ...
jQuery动态添加按钮，绑定点击事件失效
jQuery动态添加按钮,绑定点击事件失效因为需求需要给页面动态添加按钮并绑定点击事件进行操作, 但是发现绑定的点击事件失效. 原因分析: append中的节点是在整个文档加载完之后开始添加,因此页 ...

jQuery 为动态添加的元素绑定事件

jQuery 为动态添加的元素绑定事件相关推荐

最新文章

热门文章