用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. 斯坦福大学公开课机器学习:Neural network-model representation(神经网络模型及神经单元的理解)

    神经网络是在模仿大脑中的神经元或者神经网络时发明的.因此,要解释如何表示模型假设,我们先来看单个神经元在大脑中是什么样的.如下图,我们的大脑中充满了神经元,神经元是大脑中的细胞,其中有两点值得我们注意 ...

  2. laravel/lumen 的构造函数需要注意的地方

    比如 lumen,ConsoleServiceProvider 里面的 register 做了下面的处理: \Laravel\Lumen\Console\ConsoleServiceProvider: ...

  3. python3写入文件时编码问题报错

    在字符串写入文件时,有时会因编码问题导致无法写入,可在open方法中指定encoding参数 chfile = open(filename, 'w', encoding='utf-8') 这样可解决大 ...

  4. The string "--" is not permitted within comments【转】

    ibatis中SAXParseException异常:The string "--" is not permitted within comments 这个异常是说sqlmap里面 ...

  5. IdeaVim-常用操作

    IdeaVim简介 IdeaVim是IntelliJ IDEA的一款插件,他提高了我们写代码的速度,对代码的跳转,查找也很友好. 安装位置 安装之后它在 Tools > Vim Emulator ...

  6. outlook关闭时最小化工具

    outlook本身不能支持设置点击关闭按钮时最小化,而是直接退出.需要借助一个加载项实现: Keep Outlook Running. Keep Outlook Running主页:https://s ...

  7. string中substr,find函数使用

    2.string函数 find:某子串的起始位(0开始),函数的第二个参数使用代表从该位开始的后缀 substr:1) x开始的连续y位 2) x开始的后缀 #include<bits/stdc ...

  8. POJ 2503 Babelfish (STL)

    题目链接 Description You have just moved from Waterloo to a big city. The people here speak an incompreh ...

  9. 使用flask_socketio实现服务端向客户端定时推送

    websocket连接是客户端与服务器之间永久的双向通信通道,直到某方断开连接. 双向通道意味着在连接时,服务端随时可以发送消息给客户端,反之亦然,这在一些需要即时通讯的场景比如多人聊天室非常重要. ...

  10. swift 计算100000以内的 回文数

    ... { var rep = var aa = a repeat{ rep = rep * + aa % aa = aa / }) if(rep == a) { print("\(a)是回 ...