用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delete)。

代码:

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试</title>
<script type="text/javascript"
src="../resources/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
//动态添加
$(".add").on("click",function(){
console.log("进来了");
$(".info").append('<div class="delete"><h3>单击我来删除我</h3></div>');
});
//对动态添加的元素添加事件-删除
$(".info").on("click",".delete",function(){
console.log("进来了Delete!");
$(this).remove();
});
});
</script>
</head>
<body>
<h2 class='add'>单击我添加动态元素</h2>
<div class="info"></div>
</body>
</html>

用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?的更多相关文章

  1. [转]jquery append 动态添加的元素事件on 不起作用的解决方案

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  2. jquery append 动态添加的元素事件on 不起作用的解决方案

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  3. jquery append 动态添加的元素绑定事件on

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  4. jquery append 动态添加的元素事件on 不起作用问题的解决

    on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delete). 不多说看成功代码(注意加粗加色): <!DOCTYPE html PUBLIC "-//W ...

  5. Javascript/Jquery操作数组,增删改查以及动态创建HTML元素

    <html> <head> <title> New Document </title> <script src="~/Scripts/j ...

  6. jquery给动态添加的dom元素绑定事件

    $('input').click(function () { //处理代码 }); 这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定,对于页面中动态添加的元素,在页面加载完成后 ...

  7. [转] JQuery UI Tabs 动态添加页签,并跳转到新页签

    [From] https://blog.csdn.net/zhangfeng2124/article/details/76672403 需求: 1.tabs默认只有一个页签,但是需要点击某按钮,动态添 ...

  8. 使用Fragment 实现动态UI 和 动态添加Fragment

    首先写好每个Fragment: 1.在第一个Fragment写一个按钮,使其加载下一个Fragment 布局: <LinearLayout xmlns:android="http:// ...

  9. 【原生js】js动态添加dom,如何绑定事件

    首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...

随机推荐

  1. http和https的作用与区别

    PS: https就是http和TCP之间有一层SSL层,这一层的实际作用是防止钓鱼和加密.防止钓鱼通过网站的证书,网站必须有CA证书,证书类似于一个解密的签名.另外是加密,加密需要一个密钥交换算法, ...

  2. Ubuntu下安装tftp

    用户可以在主机系统联网的情况下,在终端输入下面命令进行安装: vmuser@Linux-host: ~$ sudo apt-get install tftpd-hpa tftp-hpa 配置 TFTP ...

  3. Linux中的Diff和Patch

    本文主要记录两个命令的学习情况:diff 和 patch.diff 和 patch 是一对工具,使用这对工具可以获取更新文件与历史文件的差异,并将更新应用到历史文件上.在数学上说,diff就是对两个集 ...

  4. 无法使用备份文件 'D:\20160512.bak',因为原先格式化该文件时所用扇区大小为 512,而目前所在设备的扇区大小为 4096

    删除原先备份的记录 这里再加一条,如果你备份的文件还原有兼容性的问题,那就用低版本的sql做备份,这样的话哪里都能用

  5. Study 7 —— while循环中止语句

    循环的终止语句break #用于完全结束一个循环,跳出循环体执行循环后面的语句continue #只终止本次循环,接着执行后面的循环 1. 打印0-100,截止到第6次 count = 0 while ...

  6. Neural Networks and Deep Learning(week2)Logistic Regression with a Neural Network mindset(实现一个图像识别算法)

    Logistic Regression with a Neural Network mindset You will learn to: Build the general architecture ...

  7. 虚拟机下Linux(终端)配置网络的方法

    这几天在虚拟机vmware上部署centos系统,想通过内部联网用yum命令安装必需的软件,但是一直不能静态地址联网,今天终于找到一个方法centos内部设置IP,对外联网.设置过程如下: .首先是网 ...

  8. 第一节:从程序集的角度分析System.Web.Caching.Cache ,并完成基本封装。

    一. 揭开迷雾 1. 程序集准备 a.  需要给项目添加 System.Web 程序集. b.  需要给使用的地方添加两个引用. 2. 程序集探究      在对应的类中输入关键字 Cache,选中点 ...

  9. spring boot(十一):Spring boot中mongodb的使用

    mongodb简介 传统的关系数据库一般由数据库(database).表(table).记录(record)三个层次概念组成, MongoDB是由数据库(database).集合(collection ...

  10. TCP/IP详解 卷1 第一章概述

    第一章概述 1.2 分层 网络编程通常分不同层次进行开发,每一层负责不同的通信功能. 一个协议族比如TCP/IP,通常是一组不同层次上多个协议的组合.一般可以认为是是四层协议系统: 链路层:有时也称作 ...