delegate说起对未来元素是其作用的，于是写下代码：

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>知几 - 教师端</title>

    <meta name="description" content="">

    <link rel="apple-touch-icon" href="http://cdn.dev.tiplus.cn/client-teacher/apple-touch-icon.png">

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

</head>

<body>

<p class="xxx">click</p>

<div id="a"></div>

<li class="add_reason"><span>xx</span></li>

<script type="text/javascript">

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

    $("#a").append('<li class="add_reason"><span style="display:block;">xx</span></li>');

})

$(".add_reason").delegate("span", "click",function(){

    alert("ddd");

});

</script>

</body>

</html>

其实不然，对与通过点击xxx元素新加的html，根本没有作用。

错误： 页面出现动态添加元素时，添加元素的事件用普通的方法，无法响应。

原因： 普通添加的事件，只是在document.ready时绑定的已有元素事件，所以动态添加的元素，在document.ready时不存在，所以也无法绑定元素事件，无法对事件进行响应。

这时候，需要用到上面的三个绑定方法；这三个方法只所以成功，是因为这三个方法是绑定到document上，如果元素发生变化，也都是从document开始找，动态添加的元素也能被重新查找时所发现，所以事件能够响应。换成如下代码，成功执行：

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>知几 - 教师端</title>

    <meta name="description" content="">

    <link rel="apple-touch-icon" href="http://cdn.dev.tiplus.cn/client-teacher/apple-touch-icon.png">

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

</head>

<body>

<p class="xxx">click</p>

<div id="a"></div>

<li class="add_reason"><span>xx</span></li>

<script type="text/javascript">

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

    $("#a").append('<li class="add_reason"><span style="display:block;">xx</span></li>');

})

$(document).on('click', '.add_reason',function() {

    alert("2");

});

</script>

</body>

</html>

完毕。

jquery添加未来元素时，其绑定事件不起作用解决办法的更多相关文章

  1. js/jq 动态添加的元素不能触发绑定事件解决方案

    <!-- Copyright 2017-10-27, Jachin QQ: 381558301 Email: 381558301@qq.com 请看看你们的版本并对号入座: jquery1.6版 ...

  2. 向SDE图层中添加大量数据时，出现ORA-00604以及ORA-01000的解决办法

    转自原文 向SDE图层中添加大量数据时,出现ORA-00604以及ORA-01000的解决办法 写了一个小程序,从一个列表中读取坐标串,每个坐标串生成一个IPolygon,然后将这些Polygon添加 ...

  3. jQuery on()方法绑定动态元素的点击事件无响应的解决办法

    $('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count ...

  4. 分别使用原生js和jQuery添加/删除元素的class属性

    一.原生js添加/删除元素的class属性: <!-- span元素原有class = "test" --> <span class="test&quo ...

  5. jQuery添加删除元素

    $(document).ready(function () { $('#radioExtranet').on('click', function () { showProjectInformation ...

  6. jquery点击事件失效原因和解决办法

    在使用jQuery绑定点击事件的时候,有时候会遇到点击无效,这种情况大多出现在动态添加元素的时候 例如:给demo里添加li元素给li绑定点击事件 $("#demo").appen ...

  7. JQ绑定事件的叠加和解决，index()方法的坑

    JQ绑定事件的叠加和解决,index()方法的坑 前言 在做过几个不大不小的项目后,发现技术这种东西,必须要多多实践,才能发现各种问题,理论的知识掌握的再好终究是纸上谈兵. 因此目前感觉有两点是必须要 ...

  8. 重装Oracle时出现SID已存在问题的解决办法

    重装Oracle时出现SID已存在问题的解决办法    手机打开 注意安装oracle服务器的环境,不稳定导致数据库出现问题,后果很严重! 方法如下: 1.开始->设置->控制面板-&g ...

  9. VMware下ubuntu与win8共享文件时/mnt/hgfs目录为空的解决办法

    VMware下ubuntu(guest)与win8共享文件时/mnt/hgfs目录为空的解决办法 环境:VMware-player-5.0.2-1031769 + ubuntu13.04 1.安装vm ...

随机推荐

  1. 大数据开发实战：Hive优化实战1-数据倾斜及join无关的优化

    Hive SQL的各种优化方法基本 都和数据倾斜密切相关. Hive的优化分为join相关的优化和join无关的优化,从项目的实际来说,join相关的优化占了Hive优化的大部分内容,而join相关的 ...

  2. SQL Server 数据库性能优化

    分析比较执行时间计划读取情况 1. 查看执行时间和cpu set statistics time on select * from Bus_DevHistoryData set statistics ...

  3. Spring（二十二）：Spring 事务

    事务简介: 事务管理是企业级应用程序开发中必不可少的技术,用来确保数据的完整性和一致性. 事务就是一系列的动作,它们被当做一个单独的工作单元.这些动作要么全部完成,要么全部不起作用. 事务的是四个关键 ...

  4. GIT 使用cherry-pick 重演其他分支的提交

    在使用Git时是否会遇到这样的问题: 你正在使用Git进行版本控制,某天你接着昨天的工作了提交了N个提交,结果在合并远程分支的时候才发现原来你在工作之前没有注意到你要提交的分支状态 结果导致你本来要提 ...

  5. Redis实战总结-Redis的高可用性

    在之前的博客<Redis实战总结-配置.持久化.复制>给出了一种Redis主从复制机制,简单地实现了Redis高可用.然后,如果Master服务器宕机,会导致整个Redis瘫痪,这种方式的 ...

  6. IJPay 让支付触手可及-文中有视频

    IJPay 让支付触手可及 GitHub:https://github.com/Javen205/IJPay Gitee:http://gitee.com/Javen205/IJPay JPay 是对 ...

  7. HotSpot Java虚拟机中的“方法区”“持久代”“元数据区”的关系？

    Sun/Oracle JDK的HotSpot VM中,直到JDK7都有“持久代”(Permanent Generation,简称PermGen).也称为方法区.Oracle JDK8的HotSpot ...

  8. Android studio 将 Module 打包成 Jar 包

    整理记录 AndroidStudio 把一个 module 项目打包成 jar 包. 一.默认自动生成的 jar 包 众所周知 android studio 会在library所依赖的 app运行 或 ...

  9. MySql服务初始化、安装、启动

    /// <summary> /// 安装并开启服务 /// </summary> public static bool InitAndStartService(string s ...

  10. linux中的 IO端口映射和IO内存映射

    参考自:http://blog.csdn.net/zyhorse2010/article/details/6590488 CPU地址空间 (一)地址的概念 1)物理地址:CPU地址总线传来的地址,由硬 ...