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

我当时的处理方法是在添加的时候手工绑定事件处理函数。不过新版的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>');

赞 (0)

相关推荐

  • jquery移除、绑定、触发元素事件使用示例详解

    复制代码 代码如下: unbind(type [,data])     //data是要移除的函数$('#btn').unbind("click"); //移除click$('#btn').unbind(); //移除所有 对于只需要触发一次的,随后就要立即解除绑定的情况,用one() 复制代码 代码如下: $('#btn').one("click",function(){.......}); 触发操作trigger() 方法触发被选元素的指定事件类型. 复制代码

  • jQuery中对未来的元素绑定事件用bind、live or on

    对未来的元素绑定事件不能用bind, 1.可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了. 2.推荐用on代替(注:1.7及以上的版本才支持).用法:on(events,[selector],[data],fn) 复制代码 代码如下: //放在$(function(){})里才有效 $(document).on("click", "#testDiv", function(){

  • jQuery事件绑定和委托实例

    本文实例讲述了jQuery事件绑定和委托.分享给大家供大家参考.具体方法如下: jQuery事件的绑定和委托可以用多种方法实现,on()  . bind()  . live()  . delegate() ,还有one().   有时我们可能会像下面这样绑定一个事件: 复制代码 代码如下: $("#div1").click(function() {      alert("点击后触发");  }); 上面的事件绑定,我们可以通过多种方式去实现:   1. on()

  • jQuery中的bind绑定事件与文本框改变事件的临时解决方法

    一直没什么兴趣看jQuery,就用自己那点不咋样的javascript硬撑着,今天写一个功能时想尝试一下,用bind注册事件时发现怎么都不好使 复制代码 代码如下: $("#txtStation").bind("onpropertychange", GetStationLevel); 然后onclick之类的都试了,没一个能用的,无奈去翻jQuery的API,都是鸟语我也看不懂具体说了点了,但是发现bind注册事件都是没有on的. 发现有change事件,试了试 复

  • jQuery 判断元素上是否绑定了事件

    我研究了一下之后发现,jQuery都将事件缓存起来了,其实也是为了防止内存溢出以及页面unload的时候的速度,也包括多函数触发,方便管理等诸多好处,具体可以参考此文. jQuery会在window.unload的时候卸载所有绑定过的事件,释放内存的. OK,言归正传.判断元素上是否绑定过事件用如下语句 复制代码 代码如下: jQuery.data(elem,"events")[type] //老版本也能用 $(elem).data("events")[type]

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

    本文实例讲述了jQuery给动态添加的元素绑定事件的方法.分享给大家供大家参考.具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这里介绍jQuery中如何给动态添加的元素绑定事件 在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况 例如 <div id="testdiv"> <ul>&l

  • JQuery中绑定事件（bind()）和移除事件（unbind()）

    有时候事件执行完了,想取消事件的效果可以通过一定的办法来处理.比如bind()(绑定事件)和unbind()(移除通过bind()方法添加的事件)方法来移除事件的效果. 比如下面的一个案例: 复制代码 代码如下: <script type="text/javascript">     $(function(){        $('#btn').bind("click", function(){                      $('#test

  • JQuery调用绑定click事件的3种写法

    第一种方式: $(document).ready(function(){ $("#clickme").click(function(){ alert("Hello World click"); }); 第二种方式: $('#clickmebind').bind("click", function(){ alert("Hello World bind"); }); 第三种方式: $('#clickmeon').on('click

  • JQuery给元素绑定click事件多次执行的解决方法

    原绑定方法: 复制代码 代码如下: $("#sdfsd").on("mouseout",function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法: 解决办法更改绑定方法为: 复制代码 代码如下: $("#sdfsd").unbind("click").click(function(e){ ***** }); 在绑定新click方法前对元素所绑定的click方法解绑

  • jQuery实现当按下回车键时绑定点击事件

    当按下回车键时,绑定按钮点击事件代码如下,通过检测按下的键值,回车键keycode为13,判断是否是回车键,然后完成相应的方法. 复制代码 代码如下: <script> $(function(){ $(document).keydown(function(event){ if(event.keyCode==13){ $("#mouse").click(); } }); $("#mouse").click(function(){ alert("n

  • jQuery简单绑定单个事件的方法示例

    本文实例讲述了jQuery简单绑定单个事件的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绑定单个事件</title> <script type="text/javascript" src="jquery-1.7.2.min.j

  • jQuery事件绑定.on()简要概述及应用

    jQuery事件绑定.on()简要概述及应用

    前几天在看<jquery基础教程>,看到事件委托的时候,关于live()方法讲的不是很详细,就去搜了一下关于live()和delegate()的. 然后在一处看到live()已经被移除了,囧,然后去看了最新的jq源码,果然被移除了,现在是1.9.1版本,不知道live()是在之前哪个版本被移除的,惭愧啊,之前都没留意. 看源码发现bind()和delegate()都是由on()实现的.on()的描述如下: 复制代码 代码如下: .on( events [, selector ] [, data

随机推荐