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. Redis 在线管理工具（phpRedisAdmin）介绍

    phpRedisAdmin is a simple web interface to manage Redis databases. phpRedisAdmin 在 Redis clients 的列表 ...

  2. Eclipse 文件太长，导致着色异常问题

    1. 把C/C++ ->Editor->Scalability, 对应红框中的数字调大.

  3. "garbage at end of line" on Windows 10

      在windows 10上运行docker-machine scp myvm1 docker-compose.yml myvm1:~的时候报错: "garbage at end of li ...

  4. 浅谈压缩感知（七）：常见测量矩阵的MATLAB实现

    1.随机高斯测量矩阵 function [ Phi ] = GaussMtx( M,N ) %GaussMtx Summary of this function goes here % Generat ...

  5. Python爬虫实战（二）：爬百度贴吧

    代码: # _*_ coding:utf-8 _*_ import urllib import urllib2 import re class Tool: removingImg = re.compi ...

  6. PHP开发框架比较

    PHP开发框架比较 Laravel 是一个简单优雅的 PHP WEB 开发框架,将你从意大利面条式的代码中解放出来.通过简单.优雅.表达式语法开发出很棒的 WEB应用!但是通过使用我们发现Larave ...

  7. 删除数据库mysql

    drop命令用于删除数据库. drop命令格式:drop database <数据库名>; 例如,删除名为 xhkdb的数据库:mysql> drop database xhkdb; ...

  8. android studio中的常用快捷键

    1.Ctrl+Alt+Space 这个类似Eclipse中的Alt+/,实现智能提示功能的 2.Ctrl+Y 删除当前行,Eclipse中是Ctrl+D,伤不起,每次都习惯性的按Ctrl+D,不删,反 ...

  9. iOS开发点滴 - 关闭键盘

    有时候系统显示的键盘会挡住视图中某些重要的控件,这个时候当用户按下换行键,就应该取消UITextField对象的第一响应(First Responder)状态而关闭键盘. 1. 首先,视图控制器必须遵 ...

  10. C++ 第四课：ASCII 码表

    下面的 ASCII 码表包含数值在0-127之间的字符的十进制.八进制以及十六进制表示. 十进制 八进制 十六进制 字符 描述 0 0 00 NUL   1 1 01 SOH start of hea ...