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>

    完毕。

  • 相关阅读:
    tensorflow 2.0 学习 (十) 拟合与过拟合问题
    tensorflow 2.0 学习 (九) tensorboard可视化功能认识
    tensorflow 2.0 学习 (八) keras模块的认识
    tensorflow 2.0 学习 (七) 反向传播代码逐步实现
    tensorflow 2.0 学习 (六) Himmelblua函数求极值
    tensorflow 2.0 学习 (五)MPG全连接网络训练与测试
    arp协议简单介绍
    Pthread spinlock自旋锁
    线程和进程状态
    内核态(内核空间)和用户态(用户空间)的区别和联系·
  • 原文地址:https://www.cnblogs.com/zl0372/p/jquery.html
Copyright © 2011-2022 走看看