文档章节

jQuery动态绑定

CodingNew
 CodingNew
发布于 2016/06/22 00:00
字数 437
阅读 8
收藏 0

一、原始需求

在实际项目的时候,遇到了一个问题,就是通过JS动态生成的元素,无法触发JS事件。

原始的JS代码:

$(function () {
    $(".original").click(function () {
        alert("123");
    });
})

上述类型的JS代码在处理随着页面加载而加载的DOM元素是没有问题的。但是在处理页面加载完成后,通过动态添加的方式添加上的元素是无效的,需要另外利用Jquery绑定。

动态添加元素的JS代码:

$(function () {
     $(".run").click(function () {
     var btn = "<button class='original'>我是新来的的</button>";
     $(".out").append(btn);
     });
 })

此时如果点击 新添加的按钮,通过上述声明式无法处理响应事件的。

PS:至于原因是什么,这个我也不太清楚。

二、jQuery的on方法

通过查阅相关说明,发现jQuery的on()方法是支持在动态添加的元素上绑定事件的,使用见:

官网说明(英文):官方API解释

中文说明(中文):中文API解释(推荐)

详细说明请参考上述网站,这里只提出几个重点来讲解:

  1. 使用格式:jQueryObject.on( events [, selector ] [, data ], handler )---[此为可选项]
  2. 解释:events为单个或多个事件,handler为触发事件要执行的动作。
  3. 对于selector而言,如果为null或不写那么是绑定jQueryObject匹配到的元素;如果不为null,则表明绑定的是jQuyerObject的后台元素中所有符合selector要求的元素。

三、处理方法

<script type="text/javascript">
        $(function () {
            // 方法1
            $(document).on("click", ".original", function () {
                alert("HHHH");
            });
            //无效?
            $(".original").on("click", function () {
                alert("HHHH");
            });
        })
    </script>

方法1肯定有效,但是很奇怪方法2无效。。。

四、补充

思考好了再补充,留待此次。。。

本文转载自:http://www.cnblogs.com/LiuChunfu/p/5164171.html

CodingNew
粉丝 2
博文 76
码字总数 0
作品 0
成都
私信 提问
jQuery 1.9/2.0/2.1及其以上 on 无效的解决办法

jQuery 1.9/2.0/2.1及其以上版本无法使用live函数了,然而jQuery 1.9及其以上版本提供了on函数来代替。如果要绑定的on方法是动态加载出来的元素,那么这样使用就是没有用的。 $(document).re...

zkool
2015/04/08
130
0
jQuery的事件处理方法介绍 - bind(),live(),delegate(),on()

在 jQuery的开发过程中,我们往往需要处理各种事件,例如,click(),hover()等。在jQuery的API中,我们可以使用不同的方法来将 这些事件绑定到特定的元素中。今天这篇文章中,我们将要介绍如...

kisshua
2012/04/20
277
0
求精简jquery代码

jquery,如何为表格新增行中的input(并且是以field14145_开头的)绑定onblur事件? //下面的代码是我写的,求简化语句 jQuery(".inputstyle").live("click",function (){ var _name=jQuery(thi......

爱dota爱生活
2014/09/30
202
2
jQuery on()方法绑定动态元素的点击事件无响应的解决办法

以上代码执行时,点击#check_all时,alert一直没反应,后在网上查资料时,才知道on前面的元素也必须在页面加载的时候就存在于dom里面, 那原话是这样的: 支持给动态元素和属性绑定事件的是l...

飞翔的熊blabla
02/18
0
0
初识 jQuery Deferred

jQuery 1.5之前,Ajax请求可能有点麻烦。写一个简单get请求,你可能会写成: 但这种写法存在一个问题:如果你不定义一个函数来运行此代码,执行失败后会发生什么?在这个问题得到答案之前,我...

迷途d书童
2012/04/14
4.3K
12

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
今天
6
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
5
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
15
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
15
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部