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

 更新时间:2011年08月02日 22:30:05   作者:  
有一段时间没用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>');

相关文章

  • 如何利用JQuery实现从底部回到顶部的功能

    如何利用JQuery实现从底部回到顶部的功能

    现在大部分网站因为篇幅比较长,所以都会设置这么一个按钮,利用这个按钮可以实现从底部返回顶部的功能。下面通过实例代码给大家简单介绍一下吧
    2016-12-12
  • jQuery 文本框模拟下拉列表效果

    jQuery 文本框模拟下拉列表效果

    学校作业的问题,就在网搜了一下,找不到文本框模拟的(可能本人RP问题),看到的都是用div的,结果就自己弄了一个,主要就是改变背景图片的位置,让div的位置放到文本框上面,没什么其它的东西,呵呵,见笑了
    2010-02-02
  • JQuery中serialize()用法实例分析

    JQuery中serialize()用法实例分析

    这篇文章主要介绍了JQuery中serialize()用法,实例分析了serialize()方法的功能、定义及相关使用技巧,需要的朋友可以参考下
    2015-02-02
  • jquery拖拽自动排序插件使用方法详解

    jquery拖拽自动排序插件使用方法详解

    这篇文章主要为大家详细介绍了jquery拖拽自动排序插件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • 基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)

    基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)

    文字逐行或多行滚动跑马灯插件,基于Jquery。命名为Jquery.RollTitle。支持在一个页面声明多个滚动区 (就为了要这点才写了这个)
    2010-07-07
  • jquery向后台提交数组的代码分析

    jquery向后台提交数组的代码分析

    在本篇文章里小编给大家整理的是一篇关于jquery向后台提交数组的相关知识点内容,需要的朋友们可以参考学习下。
    2020-02-02
  • jQuery模拟淘宝购物车功能

    jQuery模拟淘宝购物车功能

    本文主要介绍了用jQuery模拟淘宝购物车功能的实例,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • jQuery提交多个表单的小例子

    jQuery提交多个表单的小例子

    这篇文章介绍了jQuery提交多个表单的小例子,有需要的朋友可以参考一下
    2013-06-06
  • jquery鼠标悬停导航下划线滑出效果

    jquery鼠标悬停导航下划线滑出效果

    这篇文章主要为大家详细介绍了jquery鼠标悬停导航下划线滑出效果,菜单鼠标悬停出现下划线,向两边扩展的效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • jquery实现呼吸轮播效果

    jquery实现呼吸轮播效果

    这篇文章主要为大家详细介绍了jquery实现呼吸轮播效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10

最新评论