问题描述

假设项目中有一个列表页面，如下：

当点击列表一行数据可以显示详情页面，而详情页面的数据是根据当前行的数据作为参数，通过 ajax 请求到后台返回的数据，再根据返回的结果动态生成 html 页面，如下：

但是，在动态生成的 html 页面中绑定点击事件运行无效

问题分析

在动态生成的 html 页面中绑定点击事件运行无效的原因，是因为这些动态加载的 html 页面（图二），是在列表数据页面（图一）的 html 元素、css、js 代码加载完后，再添加的 html 元素。

在浏览器解析到图一的 html 页面元素时， 解析到 js 的这些绑定标签事件的 js 代码的时候，这些绑定事件的标签元素还没有生成，（因为 js 代码加载完后，才会有这些绑定事件的标签），所以这些 js 代码的绑定的事件，根本就没有绑定到这些动态加载的标签上，所以 js 绑定事件是不可能触发生效的。

解决方案

既然找到了问题原因，那如何解决呢？答案就是使用 JQuery 事件 的 delegate() 方法。

定义

  • delegate() 方法：为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

  • 使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

语法

$(selector).delegate(childSelector,event,data,function)

使用实例

向未来的元素添加事件处理程序

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("div").delegate("p","click",function(){

    $(this).slideToggle();

  });

  $("button").click(function(){

    $("<p>这是一个新段落。</p>").insertAfter("button");

  });

});

</script>

</head>

<body>

<div style="background-color:yellow">

<p>这是一个段落。</p>

<p>请点击任意一个 p 元素，它会消失。包括本段落。</p>

<button>在本按钮后面插入一个新的 p 元素</button>

</div>

<p><b>注释：</b>通过使用 delegate() 方法，而不是 live()，只有 div 元素中的 p 元素会受到影响。</p>

</body>

</html>

实例演示效果

JQuery 动态加载 HTML 元素时绑定点击事件无效问题的更多相关文章

  1. jQuery实现当按下回车键时绑定点击事件

    jQuery实现当按下回车键时绑定点击事件 <script> $(function(){ $(document).keydown(function(event){ if(event.key ...

  2. js动态加载HTML元素时出现的无效的点击事件

    项目中列表数据中隐藏着详情数据, 图一: 详情数据是:根据当前行的数据作为参数,通过ajax请求到后台返回的数据,再根据返回的结果动态生成HTML页面 图二: js文件中的这些js的点击事件无效: j ...

  3. juery下拉刷新，div加载更多元素并添加点击事件(二)

    buffer.append("<div class='col-xs-3 "+companyId+"' style='padding-left: 10px; padd ...

  4. jquery:为动态加载的元素添加点击事件

    jquery:为动态加载的元素添加点击事件 最近在做项目的时候遇到了这样一个问题,给用ajax动态加载出来的内容添加点击事件,但是怎么都触发不了,经过查询试验总结出正确的写法 在jquery1.7之前 ...

  5. jquery动态加载问题

    对于append的元素,原有的方法不生效 解决:用on方法 找到的:http://www.zhidao91.com/jquery-html-live-on/ 解决使用jQuery采用append添加的 ...

  6. Javascript动态加载Html元素到页面Dom文档结构时执行顺序的不同

    我们有时会通过ajax动态获取一段Html代码,并且将这段代码通过javascript放到页面的Dom结构中去. 而很多时候通过ajax动态获取的Html代码中也包含javascript代码,有一点需 ...

  7. jquery动态加载脚本

    如果你使用的是jQuery,它里面有一个内置的方法可以用来加载单个JS文件.当你需要延迟加载一些js插件或其它类型的文件时,可以使用这个方法. 一.jQuery getScript()方法加载java ...

  8. jquery动态加载 去除js

    !-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...

  9. JQuery 动态加载iframe.

    html: <iframe id="ifm" style="width:inherit;height:inherit" runat="serve ...

随机推荐

  1. 并发编程-线程池&J.U.C

    8. 共享模型之工具 8.1 线程池 池化技术相比大家已经屡见不鲜了,线程池.数据库连接池.Http 连接池等等都是对这个思想的应用.池化技术的思想主要是为了减少每次获取资源的消耗,提高对资源的利用率 ...

  2. Ubuntu所有版本下载及更新源

    官网:https://www.ubuntu.com/download/desktop没找到历史版本,且下载速度很慢在网易镜像站下载ubuntu:网址:http://mirrors.163.com/ub ...

  3. 虚拟机装好centos7没网解决办法

    输入ip查询命名 ip addr  也可以输入 ifconfig(centOs7没有ifconfig命令)查看ip,但此命令会出现3个条目,centos的ip地址是ens33条目中的inet值. 发现 ...

  4. Spring 学习笔记（二）：SpringIoC

    1 IoC与DI IoC是Inversion of Control的简称,也就是控制反转.通常来说,创建对象需要调用者手动创建,也就是new XXX()的方式.当Spring框架出现后,对象的实例不再 ...

  5. &#127822;

    江湖中有一本练了就能天下无敌的葵花宝典,大家都想得到它.如果有一天葵花宝典被公开了,人人都有机会练,到底是好事还是坏事呢? 这会成为一个灾难. 因为一个人拥有时,练不练是一个人的事.大家都拥有,练不练 ...

  6. C++ 面向对象高级设计

    inline关键字 类声明内定义的函数,自动成为inline函数,类声明外定义的函数,需要加上inline关键字才能成为inline函数 构造函数 应该使用列表初始化 class complex { ...

  7. 【Redis连接超时】记录线上RedisConnectionFailureException异常排查过程

    项目架构: 部分组件如下: SpringCloudAlibaba(Nacos+Gateway+OpenFeign)+SpringBoot2.x+Redis 问题背景: 最近由于用户量增大,在高峰时期, ...

  8. 书评第001篇：《C++黑客编程揭秘与防范》

    本书基本信息 作者:冀云(编著) 出版社:人民邮电出版社 出版时间:2012-6-1 ISBN:9787115280640 版次:1 页数:265 字数:406000 印刷时间:2012-6-1 开本 ...

  9. Intel汇编语言程序设计学习-第六章 条件处理-上

    条件处理 本章要点 1.简介 2.布尔和比较指令 3.条件跳转 4.条件循环指令 5.条件结构 6.应用:有限状态机 7.决策伪指令 6.1  简介 本章,读者将看到高级条件分支如何翻译成底层的实现代 ...

  10. 使用navicat连接阿里云上mysql

    使用宝塔面板安装mysql Linux基本内容,里面有涉及到安装Mysql 修改密码 而且也要在数据库的菜单中设置root密码 修改后密码后进行登录,就不会出现下面的报错了 [root@centos7 ...