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

Question

如ajax 加载了 <div class="div">div</div>

然后$('.div').click(function(){.....}); click操作无效
但是如果加载 <div onclick=dofun("prameter")>div</div>
dofun 就可以被onclick触发。

Answer 1

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

追问

我试了试jquery live 可以 , 只是live 被作为废弃函数 不知道为什么..；
jquery on 如果写成$('body').on('click','#div4',function(){........}); 可以，
如果写成 $('#div').on('click',function(){....}) 则不可以；
难道是同一个道理.

追答

必须同一个道理啊~你的选择器选BODY可以找到，但是#div找不到，所以肯定就没有后面的on()了，你可以看看jq的on是怎么写的，它在绑定的时候是不是重新让浏览器加载了一次这个方法，或者用到了别的方法，其实这个能不能行我也不知道，没试过，如果能行的话肯定有机制解决了AJAX的问题！

Answer 2

jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。
请使用

live(type, [data], fn)追问

此函数被jquery 1.9废弃，jquery 一般废弃的都是影响性能或造成内存泄露的东西，但不调用应该就不会影响吧，不知为什么.

追答

delegate这个方法可作为live()方法的替代，使得每次事件绑定到特定的DOM元素。

Answer 3

例子：http://typhoon.gotoip4.com/tfw-web-base/tfw/base/04_javascript/samples/02_ajax_data_mgr

Answer 4

之前需要引用jquery
<script>
$(function(){
$('.div').click(function(){.....});
})
</script>