`

jquery 动态生成的元素的事件无法绑定

 
阅读更多

今天遇到一个问题,由Jquery动态去生成一段html元素后,这些新生成的元素绑定的事件不起作用,后来查阅解决,废话不说,上代码,以下代码目的是点击button按钮,移除span区域。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript" src='http://code.jquery.com/jquery-1.9.1.js'></script>
  
 </head>

 <body>
 <input type='button' id='creates' value='test'>
 <div id='aDiv'>
 <span>
  <li><input type='button' name='a' value='1'></li>
  <li>xxx</li>
 </span>
 <span>
  <li><input type='button' name='a' value='2'></li>
  <li>xxx</li>
 </span>
 </div>
 <script type="text/javascript">
	$(function(){
		/*$('input[name=a]').each(function(){
			$(this).click(function(){
				$(this).parent().parent().remove();
			});
		});*/
		$('input[name=a]').click(function(){
				$(this).parent().parent().remove();
		});
		$('#creates').click(function(){
			$('#aDiv').append('<span><li><input type=button name=a value=1></li><li>xxx</li></span>');
		});
		//注释以下代码,动态生成的Html元素点击button时不能够被移除
		$('div').delegate('input[name=a]','click',function(){$(this).parent().parent().remove()});
		
	})
  </script>
 </body>
</html>

 

 

总结:

      1. click或者是...bind('click',function(){...});,click是bind('click',...)的简化形式,是JQuery扫描文档找出所有的$(‘input[name=a]’)元素,并把函数绑定到每个元素的click事件上,表明是现有页面上存在的元素,动态生成的元素不包括在内。

       2.delegate方法,代理或者说是委托,实现原理是事件的冒泡,在指定的祖先元素中注册事件(delegate在特定元素上),元素事件触发,传播到这个元素然后进行筛选。可以在祖先元素中绑定事件,比如上面的div是祖先元素,而新生成的元素都是div的子元素,所以动态生成的元素的事件就可以绑定了。

       delegate官网介绍:Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

      官网网址:http://api.jquery.com/delegate/

    

 

 

0
0
分享到:
评论
1 楼 qxs965266509 2013-11-11  
http://blog.csdn.net/qxs965266509/article/details/15337361

相关推荐

    jQuery为动态生成的select元素添加事件的方法

    7. 绑定事件到动态元素:文章最后部分展示了如何为动态生成的select元素绑定事件处理器。通过`$.on()`方法,即使元素是后来添加到页面中的,我们依然可以捕捉到它们的事件。在这个例子中,为ID以`"sl_0"`开头的...

    jQuery给动态添加的元素绑定事件的方法

    本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要...

    JQuery 动态生成DIV、Table并处理数据

    标题 "JQuery 动态生成DIV、Table并处理数据" 涉及的是使用JavaScript库JQuery来动态创建HTML元素,特别是DIV和Table,并且处理其中的数据。这在Web开发中非常常见,尤其是在构建交互式用户界面时。下面将详细阐述这...

    jquery动态生成树菜单

    总结,动态生成jQuery树菜单涉及HTML结构的构建、jQuery的选择器和DOM操作、数据绑定以及事件处理。这个过程需要对HTML、CSS和JavaScript有深入的理解,而jQuery则提供了便利的工具,使得这些任务变得更为简单。不过...

    layui动态绑定事件的方法

    在前端开发中,动态绑定事件是一项非常重要的技术,尤其是在处理动态创建的DOM元素时。本文将介绍使用layui框架来实现动态绑定事件的方法,并探讨其中的关键技术点。 首先,我们需要了解动态创建DOM元素后,原有的...

    jQuery动态生成的元素绑定事件操作实例分析

    本文实例讲述了jQuery动态生成的元素绑定事件操作。分享给大家供大家参考,具体如下: 这段时间在写代码的时候遇到一个问题,通过append()添加的节点,点击事件不起作用。当时我百思不得其解,各种找错都没找到错误...

    JQuery实例动态生成树

    在网页开发中,jQuery是一个非常流行的JavaScript库...总之,jQuery动态生成树形结构涉及HTML结构、JSON数据处理、事件绑定以及可能的异步加载。通过熟练掌握这些技能,开发者可以创建出功能丰富、交互性强的树状界面。

    jQuery动态添加元素无法触发绑定事件的解决方法分析

    本文主要讨论了两种解决jQuery动态添加元素无法触发绑定事件的方法: 1. 使用`live`方法(已废弃): 在jQuery 1.9之前的版本,`live`方法是处理动态元素事件的一个有效途径。`live`方法允许事件处理程序被附加到...

    JQuery调用绑定click事件的3种写法

    `.on()`方法可以处理当前及未来的元素(动态生成的元素)的事件,这使得它在处理动态内容时非常有用。下面是使用`.on()`的方法: ```javascript $('#clickmeon').on('click', function(){ alert("Hello World on")...

    浅谈Jquery为元素绑定事件

    Jquery在处理动态生成的元素时,如果直接使用bind()方法为这些元素绑定事件,将不会生效。这是因为bind()方法只能对已经存在于文档中的元素进行事件绑定。当元素是后来添加到DOM中时,这些事件监听器并不会自动应用...

    基于jQuery和layui的form表单自定义js动态生成

    jQuery的核心功能包括选择器(用于选取DOM元素)、DOM操作(如添加、删除、修改元素)、事件处理(绑定和触发事件)以及动画效果。在动态生成表单中,我们主要利用jQuery的选择器快速定位表单元素,并通过其提供的...

    vue动态生成dom并且自动绑定事件

    用jquery的时候你会发现,页面渲染后动态生成的dom,在生成之前的代码是没办法取到相应对象的,必须重新获取.但是vue基于数据绑定的特性让它能生成的时候直接绑定数据。 html: &lt;input type=text v-model...

    关于动态生成dom绑定事件失效的原因及解决方法

    之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试了一下: ...

    jquery动态生成文本框,含删除按钮

    本案例聚焦于使用jQuery动态生成文本框,并且每个文本框都配备有删除按钮。这个功能常见于需要用户输入多条类似信息的场景,如在线表单或任务管理器。 首先,`demo.html`和`demo_1.html`是两个不同的示例页面,展示...

    JQuery绑定事件

    **jQuery绑定事件**是JavaScript库jQuery中的核心功能之一,它极大地简化了DOM元素事件处理的流程,使得开发者能够更加高效地编写代码。在JavaScript原生语法中,为元素添加事件监听器通常涉及到`addEventListener`...

    jquery 给动态生成的标签绑定事件的几种方法总结

    在jQuery中,为动态生成的元素绑定事件是一个常见的需求,特别是在构建交互丰富的Web应用时。由于JavaScript运行时只会处理已存在DOM中的元素,因此对于之后动态添加的元素,普通的事件绑定方式可能无法生效。以下是...

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

    jQuery为我们提供了一种非常方便的方法来为这些动态元素绑定事件。接下来,我们将详细探讨如何使用jQuery为动态添加的HTML元素绑定事件。 首先,需要了解的是,在jQuery中,传统的直接事件绑定方式(如使用`.click...

    jquery动态添加元素事件失效问题解决方法

    今天在写JQUERY时遇到个问题:当使用脚本动态添加元素xxx时,但事件$(“.x .y”).click(function)…失效问题。 刚开始网上找到了用live函数,方法如下: 事件绑定:$(“.x .y”).click(function) 需改为: 代码如下:...

Global site tag (gtag.js) - Google Analytics