• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jquery append 动态添加的元素事件on 不起作用的解决方案

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

作者:机器有毒 字体:[增加 减小] 来源:互联网

机器有毒 通过本文主要向大家介绍了jquery动态添加元素,jquery_append事件等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

用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 append 动态添加的元素事件on 不起作用的解决方案,希望对大家学习有所帮助。

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 详解jQuery向动态生成的内容添加事件响应jQuery live()方法
  • jquery append 动态添加的元素事件on 不起作用的解决方案

相关文章

  • jQuery+PHP实现动态数字展示特效
  • 在jQuery1.5中使用deferred对象 着放大镜看Promise
  • JQuery的ON()方法支持的所有事件罗列
  • jQuery+CSS3实现四种应用广泛的导航条制作实例详解
  • jQuery 3 中的新增功能汇总介绍
  • jquery 常用操作方法
  • 详细介绍jQuery.outerWidth() 函数具体用法
  • 通过url查找a元素并点击
  • JQuery表格内容过滤的实现方法
  • jQuery插件multiScroll实现全屏鼠标滚动切换页面特效

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jquery validate表单验证的基本用法入门
    • jQuery聚合函数实例
    • 浅析JQuery获取和设置Select选项的常用方法总结
    • 快速解决jquery之get缓存问题的最简单方法介绍
    • jQuery grep()方法详解及实例代码
    • jQuery .attr()和.removeAttr()方法操作元素属性示例
    • jQuery 1.9.1源码分析系列(十三)之位置大小操作
    • jQuery实现悬浮在右上角的网页客服效果代码
    • JQuery实现表格动态增加行并对新行添加事件
    • js jquery做的图片连续滚动代码

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有