`
yaozhiqiang109
  • 浏览: 119737 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JQuery 动态删除添加html元素bind事件

阅读更多

JQuery 动态删除添加html元素,修改后的元素如果不bind事件,是不能有事件的,

 

下面是livequery插件的例子

 

 

<!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/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
		<script src="jquery.livequery.js" type="text/javascript" charset="utf-8"></script>
<title>jquery动态添加删除元素绑定事件</title>
<script  type="text/javascript" charset="utf-8">
$(document).ready(function(){
	$("#add").bind('click',function(){
		$('#example').empty().append('<li  ><a href="#" class="dynamic">动态修改html元素</a></li>');
		this.blur();
	});
	$(".dynamic").livequery('click',function(){
		alert("修改后的html元素的点击事件");
		return false;
	});
	
});
</script>
</head>
<body>
<div>
	<span><input type="button" name="add" value="add" id="add"></span>
		<ul id="example">
			<li  > <a href="#" class="dynamic">List Item</a></li>
			<li ><a href="#" class="dynamic">List Item</a></li>
		</ul>
</div>
</body>
</html>

 

当想通过页面元素ID或者CSS,当ID或者CSS不是页面原本的,是由后面动态添加或者是弹出窗口,都需要先绑定事件,然后才能对其进行操作,否则不行。

例如:

test是新增的id值,通过点击该id然后进行相关操作

 

$("#test").unbind('click');

$("#test").bind('click',function(){

   //对该id点击后的操作

});
 

 

 

  • js.rar (28.8 KB)
  • 下载次数: 26
1
1
分享到:
评论

相关推荐

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

    在Web开发中,动态添加元素是一种常见的需求,使用jQuery能够很方便地在DOM中添加新的HTML元素。然而,动态添加的元素不会自动继承之前为父元素或已存在元素绑定的事件处理器。这就是说,如果使用传统的事件绑定方法...

    解决jQuery使用append添加的元素事件无效的问题

    总的来说,解决jQuery `append`添加元素的事件无效问题,关键在于使用`on`方法代替`click`等直接的事件绑定,并将事件处理器绑定到一个固定的、已存在的父元素上,以便处理动态生成的子元素的事件。这种方法不仅解决...

    jQuery动态添加及删除表单上传元素的方法(附demo源码下载)

    在网页开发中,jQuery库提供了一种简便的方式来处理DOM(文档对象模型)操作,包括动态添加和删除元素。本文将详细讲解如何使用jQuery实现动态添加和删除表单上传元素,并结合示例代码进行解析。 首先,jQuery的...

    jquery动态添加删除div 具体实现

    总结起来,此示例展示了如何使用jQuery动态创建和删除HTML元素,以及如何利用事件委托进行高效事件处理。这个功能在构建动态表单、文件上传或其他需要动态交互的场景中非常有用。理解并掌握这些技巧对于前端开发者来...

    轻松实现jQuery添加删除按钮Click事件

    综上所述,通过使用jQuery中的bind()、unbind()、html()、text()、addClass()和removeClass()方法,我们可以高效地实现对页面元素的事件处理和动态内容更新。这些操作不仅简化了代码,还提高了代码的可读性和维护性...

    JQuery中绑定事件(bind())和移除事件(unbind())

    在jQuery中,通过bind()可以为选定的元素添加一个或多个事件处理函数。它的基本语法是: ```javascript $(selector).bind(eventType, [data], handler); ``` 这里的selector是选取元素的选择器,eventType指的是要...

    jQuery中文参考手册

    `click(function)`为元素添加点击事件,`bind()`可以绑定多种事件,`live()`(在jQuery 1.7后被`on()`取代)处理动态添加的元素的事件。 4. **动画效果**:`slideUp()`, `slideDown()`, `fadeIn()`, `fadeOut()`等...

    jQuery 1.5.2.CHM中文手册

    3. **事件处理**:jQuery简化了事件绑定,如`click(fn)`用于添加点击事件处理函数,`bind(event, fn)`用于绑定多个事件,`on()`在新版本中替代了`bind()`,支持动态添加的元素事件处理。 4. **动画效果**:`fadeIn...

    jQuery中 bind的用法简单介绍

    在jQuery库中,`bind()`方法是一个非常重要的功能,它允许开发者为HTML元素绑定一个或多个事件处理程序。当指定的事件发生时,所绑定的函数将会被执行。这个方法是理解jQuery事件处理的关键部分,特别是在处理用户...

    jquery 1.7.2 帮助文档

    2. DOM操作:jQuery提供了丰富的DOM操作方法,如`.append()`(在元素内部添加内容)、`.remove()`(删除元素)和`.clone()`(复制元素)。这些方法使得动态修改页面内容变得简单。 3. 事件处理:jQuery的事件处理...

    jquery1.5 中文API

    同时,`unbind()`用于移除事件绑定,`live()`和`delegate()`(1.7后被`on()`取代)则支持动态添加的元素的事件处理。 五、动画(Animations) jQuery的动画效果丰富多样,如`fadeIn()`和`fadeOut()`实现淡入淡出...

    jquery-1.9.1.js 、jquery-1.9.1.min.js 【官方jquery包 js】

    DOM操作则允许我们方便地添加、删除和修改元素,如`$(element).html()`用于获取或设置元素的HTML内容。事件处理是jQuery的另一大亮点,`.click()`、`.hover()`等方法使得绑定和解绑事件变得轻而易举。动画效果是...

    jquery合集

    比如,`live()`方法允许为动态添加的元素绑定事件,而无需重新绑定。 - **动画效果**:jQuery 1.4增强了动画效果,如`fadeIn()`, `fadeOut()`, `slideToggle()`等,使页面过渡更加平滑。 ### jQuery 1.7 - **1.7...

    jQuery1.10.3_20130708最新版.chm_jquery_

    jQuery的事件处理非常灵活,如`click(fn)`用于绑定点击事件,`bind(event,fn)`则可以绑定多种事件,`live(event,fn)`可为动态生成的元素绑定事件。`$(elem).on('event',fn)`是jQuery 1.7以后推荐的事件绑定方式,...

    jQuery 1.4.1 中文参考

    jQuery 是一个流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax...无论是选择DOM元素、操作HTML、处理事件,还是进行Ajax请求和动画效果,jQuery都提供了一套简单易用的API,极大地提高了开发效率。

    jqueryapi学习类库

    `.append()`、`.prepend()`用于在元素内部添加内容,`.before()`、`.after()`则在元素前后插入内容。`.remove()`和`.empty()`用于删除元素或清空内容。 四、事件处理 jQuery简化了事件处理的绑定和解绑。`.on()`...

    jQuery详细教程

    当我们在教程中演示 jQuery 时,会将函数直接添加到 &lt;head&gt; 部分中。不过,把它们放到一个单独的文件中会更好,就像这样(通过 src 属性来引用文件): 实例 &lt;script type="text/javascript" src="jquery.js"&gt; ...

    jquery手册(中英)

    2. **DOM操作**:jQuery提供了一套便捷的方法来操作DOM结构,包括添加、删除和修改元素。例如,`.append()`在元素末尾添加内容,`.prepend()`在元素开头添加内容,`.remove()`移除元素,`.html()`和`.text()`用于...

Global site tag (gtag.js) - Google Analytics