jQuery给动态添加的元素绑定事件的方法

jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定。在1.7版本以前使用live。但是在1.8版本以后推荐使用on。这里介绍jQuery中如何给动态添加的元素绑定事件
在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况

例如

1 <div id="testdiv">
2   <ul></ul>
3 </div>

需要给<ul>里面动态添加的<li>标签添加click事件

jquery 1.7版以前使用live动态绑定事件

$("#testdiv ul li").live("click",function(){
    //do something here
});

jquery 1.7版以后使用on动态绑定事件

1 $("#testdiv ul").on("click","li", function() {
2      //do something here
3 });
时间: 2024-12-23 19:54:05

jQuery给动态添加的元素绑定事件的方法的相关文章

WEB前端技巧之JQuery为动态添加的元素绑定事件

jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( selector, eventType, handler ) 例如示例: $('someUlSelector').delegate('someLiSelector','click',function(){ //codes... //$(this) for the current jquery instance of

jQuery对 动态添加 的元素 绑定事件(on()的用法)

从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代码的时候就注册了相应绑定的事件,我们平常用jQuery给HTML标签绑定(单击)事件是一般这样写 $("#btnId").click(function () { //触发事件后 逻辑 });  但是对用js动态添加的元素 是无效的,即没有绑定单击事件,所以对于动态添加的标签需要用on()来

[jquery] 给动态生成的元素绑定事件 on方法

用底下的方法尝试了好多次都失败 $('.del').on('click',function(){ alert('aa'); })// 失败!! 终于在准备放弃前看到一篇博文说的方法 $(document).on("click",'.del',function(){ alert('aa'); }); // 成功!!

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

样例: $("#modify_nick").click(function () { $(this).css("display","none"); $("#nickname_span").empty(); var input = document.createElement("input"); $(input).attr("type", "text"); $(input

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

<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("body").on('click','p',function(){ $(this).hide(); }); }); </script>

jQuery动态添加的元素绑定事件处理函数代码

jQuery动态添加的元素绑定事件处理函数代码 作者: 字体:[增加 减小] 类型:转载 有一段时间没用jquery了,今天又碰到这个问题.当时是知道有livejquery可以解决.但是我并不喜欢为了这个而另外加载一个. 我当时的处理方法是在添加的时候手工绑定事件处理函数.不过新版的jquery已经添加了这个功能.我们已经不需要为此烦恼了. 参考:http://api.jquery.com/live/ 以前我们定义事件,比如为元素定义单击事件是这样写的: 复制代码 代码如下: $('input'

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

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

jQuery获取动态添加的元素,live和on的区别

今天给大家说一下如果用jQuery获取动态添加的元素,通常如果你在网页上利用jQuery添加一个元素,那么用平常的jQuery获取元素的方法无效的获取不到的.可以用以下的方法获取动态元素!假设我们现在需要获取网页动态添加的div元素,并绑定click事件! 在jQuery1.9版本以前,可以用live方法: $('div').live('click' function () { // }); 在jQuery1.9版本以后,live方法被删除,用on方法来代替: 如果你用这样使用on方法的话,那么

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

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