zoukankan      html  css  js  c++  java
  • jQuery动态绑定

    一、原始需求

    在实际项目的时候,遇到了一个问题,就是通过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无效。。。

    四、补充

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

  • 相关阅读:
    Linux学习--线程概念
    菱形继承
    C++类型萃取
    Linux学习--进程创建
    Linux学习--进程概念
    比较全面的gdb调试命令
    再度理解原码、反码、补码
    详谈C++虚函数表那回事(多重继承关系)
    【sparkStreaming】将DStream保存在MySQL
    【sparkStreaming】kafka作为数据源的生产和消费
  • 原文地址:https://www.cnblogs.com/LiuChunfu/p/5164171.html
Copyright © 2011-2022 走看看