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. python3 map,filter和列表推导式

    num_list = [11,2,-33,10,7,3,5,43] 1.filter  函数 获取num_list大于5的元素,并返回列表 用lambda表达式实现: # 在python2 中 fil ...

  2. Centos设置开机启动Apache和Mysql[总结]

    1.前言 最近学习搭建wordpress,需要用到apahce和mysql.我是下载源代码进行安装的,安装在/url/local目录下,每次开机都需要手动启动,有点麻烦.如是想设置开机启动,从网上查了 ...

  3. Mac下brew/memcached/nginx/iterm/zsh的安装

    brew  https://www.cnblogs.com/fireworld/p/8609190.html memcached https://blog.csdn.net/whereismatrix ...

  4. JSP中利用JSTL标签对日期格式化

    数据库:Mysql 开发语言:JAVA 页面类型:JSP 对Mysql中的日期类型格式化,在JSP中,如何办呢,很多人说在JAVA后台去日期格式化,无奈了,于是找到了比较靠谱的答案 需要先引入JSTL ...

  5. [Angular CLI] Build application without remove dist folder for Docker Volume

    When we develop the Angular app inside Docker container, we can simulate Production envioment by bui ...

  6. FireDAC中的SQLite（一）

    Windows client software,FireDAC supports two SQLite library linking modes: Static linking: the x86 s ...

  7. wdcp升级php5.3无法安装PDO_MySQL的解决

    重新下载php5.3的升级脚本 wget http://down.wdlinux.cn/in/php_up53.sh 不忙运行,先修改php_up53.sh,查找./configure字段,在这行的末 ...

  8. JAVA Eclipse打开报错failed to load the jni shared library怎么办

    JRE是64位的,但是Eclipse是32位的   一般都用绿色版的了,可以直接解压运行  

  9. 算法笔记_221:串的简单处理(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 串的处理在实际的开发工作中,对字符串的处理是最常见的编程任务.本题目即是要求程序对用户输入的串进行处理.具体规则如下:1. 把每个单词的首字母变为大 ...

  10. python——从datetime模块探索python的数据架构

    问题出现于我试图向自建网页中加入实时时间开始. 我之前已经知道python中有有关事件和日期的模块datetime.以下导入datetime并作实验. >>> import date ...