jQuery如何获取动态添加的元素

一、问题描述

　　用jQuery的append()方法动态添加了一段html代码之后，发现在为新添加的元素绑定click事件时无法获取该新元素。

二、解决方法

　　度娘推荐的方法基本是用live()方法

　　live()的官方定义和用法:

　　live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。

　　live()的详细使用方法可以查看jQuery live()

　live()和bind()的区别就是live不仅可以给页面中现有的元素绑定事件，还可以给将来动态添加进来的元素绑定时间。

　　于是我用live()替换了bind(),但报出了新错误：TypeError: $(...).live is not a function

　　经过查询以后发现，原来是jQuery 1.9及其以上已经无法使用live（），可以用on()方法代替live().

　　on()的官方定义和用法:

　　on() 方法在被选元素及子元素上添加一个或多个事件处理程序。自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。

　　注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

　　on()的详细使用方法可以查看jQuery on()

三、代码演示

html页面：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>jQuery on()方法测试</title>
</head>
<body>
<button id="click1">Click me!</button>
<p>Hello,</p>
<script src="js/jquery.min.js"></script>
<script src="js/test.js"></script>
</body>
</html>

test.js：

$().ready(function(){
  $("#click1").bind("click",function(){
    $("p").append("<div class='new'><b>I'm clicked!</b></div>");
  });
  //on方法要先找到原选择器（p),再找到动态添加的选择器（.new)
  $("p").on("click",".new",function(){
　　　　$(this).remove();
  });
});

　　test.js中第6行实现了为动态添加的.new元素绑定click事件。应注意的是，虽然是为.new绑定事件，但on()方法却是绑定在原选择器<p>上的，然后将.new放在了参数列表中，原理参照上文on()的官方定义和用法。

　　以上便是所有内容，如有需要修改或补充的地方，欢迎交流。

赞 (0)

相关推荐

  • jquery html动态添加的元素绑定事件详解

    在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况: <div id="testdiv"> <ul></ul> </div> 假设我们要给ul动态添加的<li>绑定click事件形成如下结果 <div id="testdiv"> <ul> <li name="apple">apple</li> <li name="

  • jQuery动态移除和添加背景图片的方法详解

    本文实例讲述了jQuery动态移除和添加背景图片的方法.分享给大家供大家参考,具体如下: 利用jQuery移除和添加图片 1.样式 <style type="text/css"> .changeImage{ background:url(images/right.png) no-repeat center; } </style> 2.JS (1)在改变标签的样式,需要移除之前添加的样式 $("#tab tr").find("td&q

  • jquery动态切换背景图片的简单实现方法

    本文实例讲述了jquery动态切换背景图片的简单实现方法.分享给大家供大家参考,具体如下: (function() { var bgCounter = 0, backgrounds = [ "Images/BACKGROUND_1_TEST.png", "Images/BACKGROUND_2_TEST.png", "Images/BACKGROUND_3_TEST.png" ]; function changeBackground() { bg

  • JQuery动态添加Select的Option元素实现方法

    如下所示: var selector=$('<select></select>'); for(var i=0;i<5;i++){ selector.append('<option value="'+i+'">'+i+'</option>'); } 以上这篇JQuery动态添加Select的Option元素实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • jquery动态添加文本并获取值的方法

    实例如下: $(function() { var i = 1; $('#addText').click(function() { if (i < 9) { $('#main').append('<div><input type="text" name="text" + i + ""/> <a href="#" mce_href="#" class="del-te

  • 使用jquery给指定的table动态添加一行、删除一行

    使用jquery给指定的table动态添加一行、删除一行

    需求场景 1).添加一行 支持在任意行添加一行且可配置的,如可在第一行添加一行.第二行添加一行.倒数第一行添加一行.倒数第二行添加一行,随需求的变化都不会影响. 前提条件:行数需在表中存在否则添加不成功. 2).删除一行 支持动态删除一行. 先演示结果,如中意了在好好研究代码. 1.原始界面如下: 2.添加一行,如要添加一行需点击"添加"按钮,现点击两下会自动添加两行,效果如下截图: 3.删除一行,如要删除指定行,先要选中行然后在点击"删除"按钮进行删除(这不是废话

  • jQuery动态添加与删除tr行实例代码

    jQuery动态添加与删除tr行实例代码

    这篇文章给大家分享的是一个用Jquery实现动态添加和删除tr行的小例子 下面是实现的样子,当然没有样式: 点击添加按钮可以添加一行: 点击删除可以删除本行: 基本功能是这样,下面是代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 这里是引用了一个百度的jquery库,可换为本地jquery

  • jQuery移除tr无效的解决方法(tr是动态添加)

    今天在做项目时,碰到一个问题,那就是移除掉某些tr(tr是动态添加的).尝试了很多方法,都不见效(比如,deleteRow方法,貌似传的参数只能是tr的行数.没有仔细研究目前).后来,发现这个方法效果不错,特此记录. $(temp).parent().remove(); //temp为td的id code class="js plain"> 我的理解是这样的:$(temp)先获取到该td对象,然后.parent()获取到td的tr,再remove()方法,删除tr.</co

  • jQuery动态背景图片效果实现方法

    本文实例讲述了jQuery动态背景图片效果实现方法.分享给大家供大家参考.具体如下: 这里把背景图片按照1.jpg - 20.jpg放到目录里,jQuery会随机调用这些图片作为背景 $(document).ready(function(){ bgImageTotal=20; randomNumber = Math.round(Math.random()*(bgImageTotal-1))+1; imgPath=('/my/image/path/'+randomNumber+'.jpg'); $

  • jQuery实现动态添加tr到table的方法

    jQuery实现动态添加tr到table的方法

    本文实例讲述了jQuery实现动态添加tr到table的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" co

  • jQuery Easyui学习之datagrid 动态添加、移除editor

    jQuery Easyui学习之datagrid 动态添加、移除editor

    使用easyui行编辑的时候完成编辑的功能比较简单,但是如果要根据一个框的值动态改变别的值或者编辑的时候禁用某个框的时候就比较麻烦了. 比如像下面这样:添加行的时候每个值都是手动输入,修改的时候第一个值不能修改.我们来看下怎么实现这样的效果. easyui本身是不提供这么细节的功能的,需要我们自己拓展下: 在编辑的时候移除第一列的editor属性,添加的时候,添加第一列的属性. //扩展datagrid:动态添加删除editor $.extend($.fn.datagrid.methods, {

  • jQuery实现表格行和列的动态添加与删除方法【测试可用】

    jQuery实现表格行和列的动态添加与删除方法【测试可用】

    本文实例讲述了jQuery实现表格行和列的动态添加与删除方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/19

随机推荐