这里有新鲜出炉的精品教程,程序狗速度看过来!
AJAX 即 "Asynchronous Javascript + XML"(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
本文主要介绍了 Ajax 异步获取 html 数据中包含 js 方法无效的解决方法,具有很好的参考价值,下面跟着小编一起来看下吧
页面上使用 js 写了一个获取后台数据的方法
- function data() {
- var tab = $("#dic")
- $.ajax({
- url: '../demo.ashx?method=GetList',
- data: {},
- dataType: 'json',
- type: 'post',
- async: true,
- success: function (data) {
- //console.log(data);
- var parentStr = '';
- $.each(data, function (i, item) {
- //console.log(item.text);
- parentStr += "<div class='pull-right'> <a class='morechange' href='javascript:;' style='visibility: visible;'>更多+</a></div>"
- });
- tab.html(parentStr);
- }
- })
- }
其中的
<a class='morechange'href='javascript:;'style='visibility: visible;'> 更多 +</a> 绑定一个点击时间
- $('.morechange').click(function(){
- alert("弹出")
- });
发现点击无效无效
原来是 ajax 载入新 dom 之前 js 就加载完了,事件当然没有绑定到新载入的 dom 上
解决方法:
使用 jquery 的委托事件,将该方法委托到页面已经存在的一个节点上
- $("#dic").delegate('.morechange', 'click', function () { alert("弹出"); });
问题解决。
当然也可以不使用异步将 async 改为 false 也是可以的
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0519/327450.html