ajax请求返回的数据无法用选择器绑定事件

Posted 2020-09-17

今天在写一个项目的时候突然发现一个很怪异的问题，问题是这样的：

当我使用ajax去后台请求数据就将后台拼接生成的html代码直接添加到页面中了，但是在后续操作中发现，生成的html代码绑定的click不起作用，但是换成onclick=“click()”的话就可以了。

出现的原因是：

因为先后顺序的关系啊~用AJAX加载是异步加载这个应该很清楚吧~既然是异步加载那么就是非同步的，
也就是说当你的整个页面加载完成后$(‘.div‘).click(function(){.....});
这句根本找不到你异步加载的DIV，所以它就不会执行了，即使你之后再把<div class="div">div</div>
这个加载进来，在浏览器也不会找到这个DIV的，因为浏览器在第一次加载的时候没有找到它，
并且浏览器在你加载进这个DIV来之后也不会重新渲染一次，所以找不到。

而你加载进来的<div onclick=dofun("prameter")>div</div>，是它去找的这个函数，而dofun这个函数
是之前就被浏览器渲染过了，只是还没有调用，而你新加载进来的DIV正好要调用之前就已经渲染好的
函数，所以就可以使用了~

更多的解释：


因为$(‘.div‘).click(function(){.....}); 是在 ajax加载出来之后才执行的；而且，如果没找到对象，调试时应该报错才对，但是又没报错。这是因为你用ajax加载的是<div class="div">div</div>这个！但是浏览器在第一次加载渲染的时候没有找到<div class="div">div</div>这个，所以你的那个$(‘.div‘).click(function(){.....});在浏览器第一次加载的时候是不会找到 class="div"的这个层的，所以就当没找到对象跳过去了，但是语法上又没有错误，所以它不会报错，至于你说的没找到对象也没有报错那是因为$(‘.div‘).click(function(){.....});这句根本就没有执行，所以不存在查找对象的问题，自然就不报错了~JS浏览器只加载一次，并且注册一些对应的事件，当第一次注册找不到对应的元素时就会被浏览器忽略，之后及时你再加载元素进来也不会再重新加载一次JS了，除非你刷新。所以你的$(‘.div‘).click(function(){.....}); 这句算是JS，所以浏览器只加载一次。所以不管用了

本文出自 “单脚§稻草人” 博客，请务必保留此出处http://xyh1993.blog.51cto.com/7883839/1924567