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>

    完毕。

  • 相关阅读:
    用 ArcMap 发布 ArcGIS Server FeatureServer Feature Access 服务 PostgreSQL 版本
    ArcMap 发布 ArcGIS Server OGC(WMSServer,MapServer)服务
    ArcScene 创建三维模型数据
    ArcMap 导入自定义样式Symbols
    ArcMap 导入 CGCS2000 线段数据
    ArcMap 导入 CGCS2000 点坐标数据
    ArcGis Server manager 忘记用户名和密码
    The view or its master was not found or no view engine supports the searched locations
    python小记(3)操作文件
    pytest(2) pytest与unittest的区别
  • 原文地址:https://www.cnblogs.com/zl0372/p/jquery.html
Copyright © 2011-2022 走看看