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 相关文章推荐
jquery实现更改表格行顺序示例
Apr 30 Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
微信小程序 wxapp内容组件 progress详细介绍
Oct 31 Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 Javascript
jQuery内存泄露解决办法
Dec 13 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 Javascript
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
基于JavaScript实现大文件上传后端代码实例
Aug 18 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 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
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
Linux中为php配置伪静态
2014/12/17 PHP
php将远程图片保存到本地服务器的实现代码
2015/08/03 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
jquery中实现标签切换效果的代码
2011/03/01 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
js制作简单的音乐播放器的示例代码
2017/08/28 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
vant自定义二级菜单操作
2020/11/02 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
python中defaultdict的用法详解
2017/06/07 Python
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
NULL是什么,它是怎么定义的
2015/05/09 面试题
社区党员先进事迹
2014/01/22 职场文书
学生安全教育材料
2014/02/14 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
应届生求职信
2014/05/31 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
2014年班主任工作总结
2014/11/08 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python