`
周禄康
  • 浏览: 157772 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

jQuery -- 如何为动态添加的元素绑定事件处理函数

阅读更多

有一段时间没用jquery了,今天又碰到这个问题。当时是知道有livejquery可以解决。但是我并不喜欢为了这个而另外加载一个。我当时的处理方法是在添加的时候手工绑定事件处理函数。不过新版的jquery已经添加了这个功能。我们已经不需要为此烦恼了。

参考:http://api.jquery.com/live/

以前我们定义事件,比如为元素定义单击事件是这样写的:

$('input').click(function () {

//处理代码

});

 

$('.clickme').bind('click', function() {
  // Bound handler called.
});

 

但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定。即使你使用jquery的clone函数,它并不能将事件也复制(到目前为止我还不清楚它是为什么这样定义,是没法复制还是刻意这么处理,以防止出现某些异常,这还有待去分析一下jquery的源代码)。

现在,使用live你可以轻松搞定,

$('.clickme').live('click', function() {
  // Live handler called.
});

 

这样,你即使在后面动态插入的元素,也会被绑定事件,

$('body').append('<div class="clickme">Another target</div>');

 

 

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/xinhaozheng/archive/2010/09/03/5862109.aspx

 

 

分享到:
评论

相关推荐

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

    我当时的处理方法是在添加的时候手工绑定事件处理函数。不过新版的jquery已经添加了这个功能。我们已经不需要为此烦恼了。 参考:http://api.jquery.com/live/ 以前我们定义事件,比如为元素定义单击事件是这样写的...

    Web前端开发技术-Jquery事件操作.pptx

    one()方法:如果想要让一个元素的事件只触发一次,为元素绑定事件后再解绑会比较麻烦,因此,可以使用one()方法,直接绑定一次性事件。;off()方法:该方法可以移除通过on()方法添加的事件处理程序;案例演示:; 触发...

    jQuery 事件以及处理方法

    事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。 触发实例:$("button#demo").click() 上面的例子将触发 id="demo" 的 button 元素的 click 事件。 绑定实例:$("button#demo").click...

    jquery动态添加元素事件失效问题解决方法

    刚开始网上找到了用live函数,方法如下: 事件绑定:$(“.x .y”).click(function) 需改为: 代码如下: $(“.x .y”).live(‘click’,function); 但是由于1.8版本后live这种方法不再支持,所以需要用下述jquery中on...

    jquery-1.1.3 效率提高800%

    // the options for this ajax request }global(true) 数据类型: Boolean 是否为当前的请求触发全局AJAX事件处理函数,默认值为true。设置为false可以防止触发像ajaxStart或ajaxStop这样的全局事件处理函数...

    jQuery如何获取动态添加的元素

     用jQuery的append()方法动态添加了一段html代码之后,发现在为新添加的元素绑定click事件时无法获取该新元素。 二、解决方法  度娘推荐的方法基本是用live()方法  live()的官方定义和用法:  live() 方法为...

    jQuery事件及绑定.pptx

    jQuery事件处理方法是jQuery的核心函数。 常用事件方法(教材P263表A-4): 分类 事件方法 描述 鼠标 click() 单机鼠标左键时触发 dbclick() 双击鼠标左键时触发 键盘 keypress() 键盘按键(Shift、CapsLock等非字符...

    jQuery-Plugin-ToggleAction:一个jQuery插件,它允许绑定事件处理程序,这些事件处理程序将连续执行

    我制作了这个插件来适应jQuery 1.8中对函数的弃用描述将两个或多个处理程序绑定到匹配的元素,以在备用事件上执行。 .toggleAction( eventType [, eventData ], handler ... ) 用法每次单击元素时,将元素的背景...

    jQuery完全实例.rar

    在这个函数的内部,是通过临时创建一个元素,并将这个元素的 innerHTML 属性设置为给定的标记字符串,来实现标记到 DOM 元素转换的。所以,这个函数既有灵活性,也有局限性。 jQuery 代码: $("&lt;div&gt;&lt;p&gt;Hello&lt;/p&gt;...

    jQuery权威指南-源代码

    此外,jQuery中完善的Ajax功能、行为与结构层的分离、可靠的事件处理机制也同样使得Web后端开发者如虎添翼,使用少量代码就可以实现复杂的功能。特别是新版本1.4.x的发布,jQuery在功能和性能方面都有质的提升,极大...

    详谈jQuery unbind 删除绑定事件 / 移除标签方法

    jQuery unbind 删除绑定事件 unbind([type],[data]) 是 bind()的反向操作,从每一个匹配的元素...data (Function): (可选) 要从每个匹配元素的事件中反绑定的事件处理函数 示例: 把所有段落的所有事件取消绑定 jQuery

    详解jQuery向动态生成的内容添加事件响应jQuery live()方法

    jQuery live()方法是给所有匹配的元素附加一个事件处理函数,即使这个元素是以后通过append,prepend,after等事件生成后的内容也依然有效。 这个方法可以看做是 .bind() 方法的一个变体。使用 .bind() 时,选择器匹配...

    jquery事件与绑定事件

    1.首先,我们来看一下经常使用的添加事件的方式: &lt;input type=button id=btn ...只能为一个事件处理函数,在事件处理函数方法中,获取事件对象的方式不同. jQuery中的事件 ready事件: 当页面加载完成后,来执行fun

    JQuery入门——用one()方法绑定事件处理函数(仅触发一次)

    1、one()方法功能是为所选的元素绑定一个仅触发一次的处理函数,其调用的语法格式为:one(type, [data], fn) 其中参数type为事件类型,即需要触发什么类型的事件;参数data为可选参数,表示作为event.data属性值传递...

    JQuery入门——用bind方法绑定事件处理函数应用介绍

    bind()功能是为每个选择元素的事件绑定处理函数,感兴趣的你可以了解下它的语法bind(type, [data], fn),参数data是作为event.data属性值传递对象的额外数据对象,好好学习希望本可以帮助到你

    【JavaScript源代码】JQuery绑定事件四种实现方法解析.docx

    JQuery绑定事件四种实现方法解析  jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码。下面我们来看下jQuery...

    jQuery详细教程

    Event 函数 绑定函数至 $(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时) $(selector).click(function) 触发或将函数绑定到被选元素的点击事件 $(selector).dblclick(function) 触发或...

    jquery快捷动态绑定键盘事件的操作函数代码

    动态绑定键盘事件的方法或许会有很多,在本文将为大家介绍下jquery是如何快捷实现的,感兴趣的朋友不要错过

Global site tag (gtag.js) - Google Analytics