Ajax异步获取html数据中包含js方法无效的解决方法


Posted in Javascript onFebruary 20, 2017

页面上使用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也是可以的

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript DOM学习第六章 表单实例
Feb 19 Javascript
xheditor与validate插件冲突的解决方案
Apr 15 Javascript
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 Javascript
js基于myFocus实现轮播图效果
Feb 14 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
详细分析jsonp的原理和实现方式
Nov 20 Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 Javascript
原生js实现放大镜
Feb 20 #Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 #Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
Feb 20 #Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 #Javascript
原生node.js案例--前后台交互
Feb 20 #Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
Feb 20 #Javascript
jQuery实现链接的title快速出现的方法
Feb 20 #Javascript
You might like
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
php处理复杂xml数据示例
2016/07/11 PHP
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
jquery.validate使用时遇到的问题
2015/05/25 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
python实现实时监控文件的方法
2016/08/26 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
python try...finally...的实现方法
2020/11/25 Python
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
公司年会主持词
2014/03/22 职场文书
村干部培训方案
2014/05/02 职场文书
计生个人工作总结
2015/02/28 职场文书
社会实践单位意见
2015/06/05 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
基于PyQt5制作一个群发邮件工具
2022/04/08 Python