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 相关文章推荐
基于逻辑运算的简单权限系统(实现) JS 版
Mar 24 Javascript
jQuery学习笔记之jQuery的DOM操作
Dec 22 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
Javascript实现页面滚动时导航智能定位
May 06 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
webpack中如何加载静态文件的方法步骤
May 18 Javascript
JS数组方法reverse()用法实例分析
Jan 18 Javascript
微信小程序实现通讯录列表展开收起
Nov 18 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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
MYSQL 小技巧 -- LAST_INSERT_ID
2009/11/24 PHP
利用PHP实现智能文件类型检测的实现代码
2011/08/02 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
2016/09/01 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
微信小程序如何访问公众号文章
2019/07/08 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
Python中对象的引用与复制代码示例
2017/12/04 Python
python编写微信远程控制电脑的程序
2018/01/05 Python
python3 flask实现文件上传功能
2020/03/20 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
主题婚礼策划方案
2014/02/10 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
防汛通知
2015/04/25 职场文书
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏