zoukankan      html  css  js  c++  java
  • JS动态添加的标签无法绑定事件解决方案~~~

    今天用ajax实现动态插入数据时发现监听一直不起作用,一样的代码,非动态的就可以监听实现

    这是困扰了我近一个小时的bug,后面才理解到可能是动态插入导致的!

    看了看网上的解决方案,似乎都不太通俗,讲的也不周全,记录一下,这是成长的印记!

    废话不多说,直接看问题上方案!

    <tbody>
                <tr>
                    <th><a href=""></a></th>
                </tr>
    </tbody>
    
    //如上述代码中tr标签及th标签都是通过JS代码动态添加的,这时候我们又需要监听a标签的点击事件
    //通过下面的监听方式是无法实现的
    
    $("a").on("click",func(){})
    
    
    //由此我们需要通过对非动态父标签或者祖先级标签来监听子标签实现

    解决方案!!

    $('tbody').on("click","a",function(){ 
              alert(this.id);
    })

    代码解析:既然无法直接监听动态插入的标签,那我们就通过代理监听,也就是通过非动态插入的父标签对子标签进行监听。

    $('tbody') 对应的tbody标签是非动态插入的祖先级标签,切记,这里的父级标签一定是非动态的!!!!
    "a" 标签即我们需要监听的标签,可以通过其他选择器来查找标签,比如id或者类等等,这里只是用标签查找做演示。
    在函数体内我alert了this.id, 有的人对这个this不理解,它到底指的是谁,我也曾有这个疑惑,但百度的博客似乎没人讲清楚
      其实这个 this 指的就是 a 标签本身, this.id就是a标签的id。


    事实上任何标签都可以通过父标签代理监听的方式去监听,或许效果会更好


    以上就是固定格式,欢迎来搂~~




  • 相关阅读:
    常用JS判断正则
    Java中final修饰参数的作用
    hibernate实现动态表名
    java urlrewrite
    tomcat下,超链接下载出现乱码页面
    Hibernate 在MyEclipse中配置
    javamail command not implemented
    The Missing Piece
    十六进制颜色码【转载】
    【转载】关于:读写xls文件,提供下载的一个小例子(jxl 的简单运用) 创建文件
  • 原文地址:https://www.cnblogs.com/dongxixi/p/10992308.html
Copyright © 2011-2022 走看看