问题描述

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

当点击列表一行数据可以显示详情页面，而详情页面的数据是根据当前行的数据作为参数，通过 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. 如何调试 Java 开源项目源码，记一种源码导入开发工具并调试的通用方法

    楔子 说起读开源项目源码,很多朋友觉得高大上.大佬牛逼,云云~ 挡在很多人面前的不是源码怎么读,而是不知道如何导入源码到开发工具以及如何调试源码. 本文将以 spring-cloud-gateway ...

  2. 《疯狂Kotlin讲义》读书笔记4——流程控制

    流程控制 与Java类似,Kotlin同样提供了两种基本的流程控制结构:分支结构和循环结构. Kotlin提供了 if 和 when 两种分支语句,其中 when 语句可以代替Java的switch语 ...

  3. 浅入Kubernetes(7)：应用部署实例，Deployment、Service、ReplicaSet

    目录 Deployment 创建 Deployment kubectl apply/create 网络端口映射和更新 Deployment ReplicaSet 在本文之前,你需要阅读: 尝试 kub ...

  4. Salesforce学习之路（十）Aura组件工作原理

    很喜欢曾经看到的一句话:以输出倒逼输入.以输出的形式强制自己学习,确实是高效的学习方式,真的很棒.以下仅为个人学习理解,如有错误,欢迎指出,共同学习. 1. 什么是Lightning Componen ...

  5. Redis系统学习之事物

    Redis事物操作 Redis 事务可以一次执行多个命令, 并且带有以下三个重要的保证: 批量操作在发送 EXEC 命令前被放入队列缓存. 收到 EXEC 命令后进入事务执行,事务中任意命令执行失败, ...

  6. Building Fire Stations 39届亚洲赛牡丹江站B题

    题意:      给你一棵树,让你再里面选取两个点作为**点,然后所有点的权值是到这两个点中最近的那个的距离,最后问距离中最长的最短是多少,输出距离还有那两个点(spj特判). 思路:      现场 ...

  7. Winamp栈溢出漏洞研究【转载】

    课程简介 Winamp是一款非常经典的音乐播放软件,它于上世纪九十年代后期问世.与现在音乐播放软件行业百家争鸣的情况不同,当时可以说Winamp就是听音乐的唯一选择了,相信那个时代的电脑玩家是深有体会 ...

  8. Portswigger web security academy：WebSockets

    Portswigger web security academy:WebSockets 目录 Portswigger web security academy:WebSockets Lab: Mani ...

  9. 【python】Leetcode每日一题-逆波兰表达式求值

    [python]Leetcode每日一题-逆波兰表达式求值 [题目描述] 根据 逆波兰表示法,求表达式的值. 有效的算符包括 +.-.*./ .每个运算对象可以是整数,也可以是另一个逆波兰表达式. 说 ...

  10. Spring中@Import注解的使用

    Spring中@Import注解的使用 @Import注解算是SpringBoot自动配置原理中一个很重要的注解 认识@Import注解 先看一下源码 @Target(ElementType.TYPE ...