zoukankan      html  css  js  c++  java
  • jquery添加未来元素时,其绑定事件不起作用解决办法

    delegate说起对未来元素是其作用的,于是写下代码:

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>知几 - 教师端</title>
        <meta name="description" content="">
        <link rel="apple-touch-icon" href="http://cdn.dev.tiplus.cn/client-teacher/apple-touch-icon.png">
        <script type="text/javascript" src="jquery.min.js"></script>
    </head>
    
    <body>
    
    <p class="xxx">click</p>
    <div id="a"></div>
    <li class="add_reason"><span>xx</span></li>
    
    <script type="text/javascript">
    $(".xxx").click(function(){
        $("#a").append('<li class="add_reason"><span style="display:block;">xx</span></li>');
    })
    
    $(".add_reason").delegate("span", "click",function(){
        alert("ddd");
    });
    </script>
    
    </body>
    </html>

    其实不然,对与通过点击xxx元素新加的html,根本没有作用。

    错误: 页面出现动态添加元素时,添加元素的事件用普通的方法,无法响应。

    原因: 普通添加的事件,只是在document.ready时绑定的已有元素事件,所以动态添加的元素,在document.ready时不存在,所以也无法绑定元素事件,无法对事件进行响应。

    这时候,需要用到上面的三个绑定方法;这三个方法只所以成功,是因为这三个方法是绑定到document上,如果元素发生变化,也都是从document开始找,动态添加的元素也能被重新查找时所发现,所以事件能够响应。换成如下代码,成功执行:

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>知几 - 教师端</title>
        <meta name="description" content="">
        <link rel="apple-touch-icon" href="http://cdn.dev.tiplus.cn/client-teacher/apple-touch-icon.png">
        <script type="text/javascript" src="jquery.min.js"></script>
    </head>
    
    <body>
    
    <p class="xxx">click</p>
    <div id="a"></div>
    <li class="add_reason"><span>xx</span></li>
    
    
    
    <script type="text/javascript">
    $(".xxx").click(function(){
        $("#a").append('<li class="add_reason"><span style="display:block;">xx</span></li>');
    })
    
    $(document).on('click', '.add_reason',function() { 
        alert("2");
    });
    </script>
    
    </body>
    </html>

    完毕。

  • 相关阅读:
    图像边界扩展
    数据增强之图像旋转及坐标对应(附代码)
    Opencv中的阈值函数
    linux下C++遍历文件夹下的全部文件;Windows/Linux下C++批量修改文件名,批量删除文件
    提取内环图像
    linux中tab键不能补全,却能切换窗口
    Mathtype部分数学符号不能显示,只能显示方框时的解决办法
    Qt运行不出现界面
    直方图处理
    DTCMS自定义标签:面包屑导航,栏目中通过栏目调用名称获得栏目名称
  • 原文地址:https://www.cnblogs.com/zl0372/p/jquery.html
Copyright © 2011-2022 走看看