ajax动态加载数据后的click事件问题

问:
为什么ajax加载出来的html,无法用选择器绑定事件,但可以直接在html上使用onclick等事件?

如ajax 加载了<div class="div">div</div>
然后$('.div').click(function(){.....});click操作无效

但是如果加载 <div onclick=dofun("prameter")>div</div>
dofun 就可以被onclick触发。

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

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

主要还是异步和同步区别的关系~

其他答案:
(1)在html骨架加载完成 js初始化的时候,并不存在<span class="add">节点,所以他的绑定事件是无效的,可以将该事件绑定到document上通过这种事件委托的机制实现绑定 试试:$(document).on('click','span.add',function(){ ....});

(2)动态加载的数据中的某一标签是不能直接用$(“标签”).click事件的,可以用on、live、或者直接在标签里面写他的onclick事件!

参考:
https://zhidao.baidu.com/question/1732157603464634587.html
http://bbs.csdn.net/topics/390985786

猜你喜欢

转载自blog.csdn.net/DreamFJ/article/details/75365123