JAVA高级面试进阶训练营视频教程

admin

今天用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。


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


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