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. IOS 多线程 NSThread

    一个正在运行的应用程序是一个进程,一个进程会默认开启一个主线程,但是在主线程中的操作是串行的,也就是当有多个任务同时需要完成的时候,是按照顺序一个个执行.因此,为了提高效率,会在进程中开启多个线程,每 ...

  2. 【RPC】跨语言-RPC框架

    跨语言-RPC框架 跨语言 rpc_百度搜索 (5 条消息)谁能用通俗的语言解释一下什么是 RPC 框架? - 知乎 跨语言RPC框架Hessian.Thrift.Protocol Buffer之间的 ...

  3. Linq-查询上一条下一条

    //下一条 int pollid = poll.Where(f => f.PollID < CurrentId).OrderByDescending(o => o.PollID).F ...

  4. 轻松解决vuejs跨域

    Vuejs跨域问题实战 有时候,本地使用webpack开启一个node的dev端口,项目中使用vuejs去访问别人家的api,比如豆瓣或者其他的api,不使用jsonp肯定就会报跨域的问题. 如何让我 ...

  5. java 上传图片压缩图片

    package com.bitspace.flame.util; import java.io.File; import java.awt.Image;import java.awt.image.Bu ...

  6. javascript获取时间差

    function GetDateDiff(startTime, endTime, diffType) { //将xxxx-xx-xx的时间格式,转换为 xxxx/xx/xx的格式 startTime ...

  7. eclipse插件大全

    http://www.cnblogs.com/homezzm/archive/2009/11/27/1612054.html

  8. jdbc:initialize-database标签的研究

    在spring的applicationContext.xml中如果引入了:<?xml version="1.0" encoding="UTF-8"?> ...

  9. ES6 箭头函数（arrow function）

    例行声明:接下来的文字内容全部来自 Understanding ECMAScript 6,作者是Nicholas C.Zakas,也就是大名鼎鼎的Professional JavaScript for ...

  10. Redis开发 - 1. 认识redis

    1. 什么是Redis? Redis is a very fast non-relational database that stores a mapping of keys to five diff ...