减小字体
增大字体- ·上一篇文章：前端司机必备,常用 JavaScript CDN 库
- ·下一篇文章：最新Uspcat NodeJS视频教程
当前位置：K88软件开发 → 文章中心 → 编程语言 → JavaScript → JS01 → 文章内容
解决ajax加载的内容中js不执行问题。
-->
解决ajax加载的内容中js不执行问题。
ajax载入新dom之前js就加载完了，事件当然没有绑定到新载入的dom上。
举个例子，如果ajax载入了一个
举个例子，如果ajax载入了一个
1
<span class="o"><</span><span class="nx">span</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"load"</span><span class="o">><</span><span class="err">/span></span>
这个时候如果你的js中写了$(‘.load’).on(‘click’,function(){ do something…});
事件是绑定不上去滴。
你需要$(‘body’).on(‘click’ , ‘.load’ , function(){ do something …}); ?//事件委托
原理很简单，将事件委托到body（当然可以是其它父元素），等事件冒泡到父元素上面再进行事件处理。当然，如果你在body上绑定几百个事件，基本上页面就跪了。。。
so，还有一个方法，就是预判你要加载的dom，然后预先创建一个同样的元素。
例如：你可以先在页面中写一个
1
<span class="o"><</span><span class="nx">span</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"load load-hide"</span><span class="o">></span><span class="nx">element</span><span class="o"><</span><span class="err">/span></span>
然后将事件绑定到这个DOM上，ajax加载的时候只需要加载element
然后
1
2
3
4
5
6
7
8
<span class="nx">$</span><span class="p">(</span><span class="s1">'.load'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'click'</span> <span class="p">,</span> <span class="kd">function</span><span class="p">(){</span> <span class="k">do</span> <span class="nx">something</span> <span class="p">...</span> <span class="p">});</span>
<span class="p">.......</span>
<span class="nx">some</span> <span class="nx">code</span>
<span class="p">.......</span>
<span class="kd">var</span> <span class="nx">$_load</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'.load'</span><span class="p">),</span>
<span class="nx">$load</span> <span class="o">=</span> <span class="nx">$_load</span><span class="p">.</span><span class="nx">clone</span><span class="p">(</span><span class="kc">true</span><span class="p">),</span><span class="c1">//true参数会将事件绑定克隆</span>
<span class="nx">$ele</span> <span class="o">=</span> <span class="nx">$load</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">element</span><span class="p">);</span>
<span class="nx">$_load</span><span class="p">.</span><span class="nx">after</span><span class="p">(</span><span class="nx">$ele</span><span class="p">);</span>
当然，这种方法在一次性载入大量数据的情况下性能也非常堪忧。但是在零碎的不同类项的数据载入时比较方便。
解决ajax加载的内容中js不执行问题。
