`

jquery 动态创建节点并为节点添加事件和动态添加或改变class属性

阅读更多
关于jquery 动态创建节点并为节点添加事件时,如果直接在它们上面绑定事件是不行了,需要用bind(),live(),delegate() ,on()等方法就行绑定,
对于为一个节点动态添加或改变class属性($("#a").attr("class",".b") 或者$("#a").addClass("b"))后,也不能通过用该改变后的class来绑定事件,如:

$(".b").click(function(){});这样绑定的事件也是不起作用的,也得通过bind(),live(),delegate() ,on()方法来绑定
但是可以通过改变后该class属性还获取该对象的一些属性值,如:

$(".b").text();或$(".b").val();这样是可以.

如果通过一个对象属性绑定了事件,之后又修改一下它的该属性的值,那么对该对象起作用的还是原来的属性值,而非改变后的值,如:
<div class="aaa">abc</div>
$(function(){
  $(".aaa").click(function(){alert("aaa");$(this).attr("class","aaa1");});
  $(".aaa1").click(function(){alert("aaa1")});
});
当第一次点击class="aaa"的div时,程序会弹出"aaa",该div的class属性值会变为class="aaa1",然后第二次点击该div时候,程序依然会弹出"aaa",而不是弹出"aaa1",
所以,我们不难发现通过一个属性对节点绑定事件,无论该属性值是否发生变化,如果不特殊进行处理,程序对该节点记住还是它之前的属性值,通过改变后的属性值不能对该节点进行事件绑定!

总结:
1:对于动态创建节点绑定事件,需要用bind(),live(),delegate() ,on()这些方法来进行绑定事件。
2:对于动态改变原有的节点的属性,用改变后的该属性绑定事件也需要用bind(),live(),delegate() ,on()方法来绑定事件,但是却可以通过改变后的该属性来获取该对象或该对象的一些属性值!
3:通过一个属性对节点绑定事件,无论该属性值是否发生变化,如果不特殊进行处理,程序对该节点记住还是它之前的属性值,通过改变后的属性值不能对该节点进行事件绑定!
分享到:
评论

相关推荐

    JQuery创建DOM节点的方法

    本文实例讲述了JQuery创建DOM节点的方法。分享给大家供大家参考。具体分析如下: 用JQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点,然后可以用attr()方法来获取元素的各种属性的值。但真正的DOM...

    jQuery与JavaScript节点创建方法的对比

    但在实际开发中,要动态创建内容,主要操作的节点包括元素、属性和文本。 1、需求:创建一个h1 标签,把它作为div元素的子节点添加到DOM节点树中。 2、基本思路是:先创建一个h1元素对象,然后添加到文档中。 3、...

    JQuery插入DOM节点的方法

    本文实例讲述了JQuery插入DOM节点的方法。分享给大家供大家参考。具体分析如下: 动态创建HTML元素并没有实际用处,还需要将新创建的元素插入文档中。将新创建的节点插入文档最简单的办法是,让它成为这个文档的某个...

    超实用的jQuery代码段

    3.14 如何为动态添加的元素绑定事件处理函数 3.15 为表格行增加单击事件 3.16 用回车键模拟Tab键 第4章 jQuery操作CSS样式 4.1 使用addClass()函数动态添加样式类 4.2 使用removeClass()函数动态移除样式类 4.3...

    解决jQuery ajax动态新增节点无法触发点击事件的问题

    解决jQuery ajax动态新增节点无法触发事件问题的两种解决方法,为了达到更好的演示效果,假设在某个页面的body下有以下结构的代码: &lt;li class=demo1&gt;a1 &lt;li class=demo1&gt;a2 &lt;li class=demo1&gt;a3&lt;/l

    JQuery查找DOM节点的方法

    本文实例讲述了JQuery查找DOM节点的方法。分享给大家供大家参考。具体分析如下: DOM操作是JQuery最常见的用法,下面我们来将JQuery的DOM操作逐个剖析下。先来最简单的查找节点操作。 为了能全面地讲解DOM操作,首先...

    jQuery详细教程

    jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。 选择器允许您对 HTML 元素组或单个元素进行操作。 在 HTML DOM 术语中: 选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。...

    jquery取子节点及当前节点属性值的方法

    分享下jquery取子节点及当前节点属性值的方法。 &lt;li class=menulink&gt; &lt;a&gt;&lt;span&gt;资料管理 取子节点: $(.menulink a).each(function(){ var id=this.id; }); 取当前节点: $(.menulink ).each(function(){ var...

    jquery 取子节点及当前节点属性值的方法

    分享下jquery取子节点及当前节点属性值的方法。 &lt;li class=menulink&gt; &lt;a&gt;&lt;span&gt;资料管理 取子节点: $(.menulink a).each(function(){ var id=this.id; }); 取当前节点: $(.menulink ).each(function(){ var...

    jquery插件使用方法大全

    jQuery.sub() jQuery 1.5提供了一种创建和修改jQuery副本的方式。可以用来添加不向外部公开的方法,或者对jQuery的某些方法进行重新定义以提供新功能,或者提供更好的封装、避免名称空间冲突。当然,也可以用来开发...

    jQuery动态百分比进度加载代码.zip

    Query动态百分比进度加载代码是一款动态进度条自定义插件,只需要引用JS就可以用,哪里需要进度条就在哪个节点添加class就可以了。

    jQuery获取父元素节点、子元素节点及兄弟元素节点的方法

    本文实例讲述了jQuery获取父元素节点、子元素节点及兄弟元素节点的方法。分享给大家供大家参考,具体如下: 先来看这段html代码,整个取节点(父、子、兄弟等)的方法都是围绕这段代码来的: &lt;ul class=par&gt; ...

    jquery获取子节点和父节点的示例代码

    一、获取子节点 比如是一个 id 为 test 的 div元素,我们这样选中,$(‘#test’),我们要查找这个div下的一个class为demo的span元素,有一下几种方法 1、使用筛选条件 $(‘#test span.demo’) 2、使用find()函数 $...

    解决jquery中动态新增的元素节点无法触发事件问题的两种方法

    比如做一个ajax读取留言列表的时候,每条留言后面有个...解决jquery中动态新增的元素节点无法触发事件的问题有两种解决方法,如下: 为了达到更好的演示效果,假设在某个页面的body下有以下结构的代码: 新加一条&lt;/p&gt;

    javascript获取节点

    里面包含兼容ie和火狐的代码,如添加事件,由class属性得到节点,jquery1.7,是学习的好资料

    jQuery核心语法

    通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 只有jquery...

    JavaScript基础教程第8版

    书中从JavaScript语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie,并在上一版的基础上新增了两章,讲述jQuery框架的基础知识。本书不仅介绍了基础知识和使用方法,也深入探讨...

    jquery 取子节点及当前节点属性值

    &lt;li class=menulink&gt; &lt;a&gt;&lt;span&gt;资料管理 取子节点: $(.menulink a).each(function(){ var id=this.id; }); 取当前节点: $(.menulink ).each(function(){ var id=this.id; });

    jQuery遍历节点方法汇总(推荐)

    1.children()方法:$(‘div’).children()—遍历查找div元素的所有子元素节点 &lt;p&gt;Hello &lt;span&gt;Hello Again &lt;p class=box&gt;您好! &lt;p&gt;And Again [removed] $('div').children(); //&lt;span&gt;Hello Again&lt;/span&gt;&lt;p ...

    JQuery替换DOM节点的方法

    如果要替换某个节点,jQuery提供了相应的方法,即replaceWith()和replaceAll()。 replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素。 本例 JQuery 代码: [removed] //&lt;![CDATA[ $...

Global site tag (gtag.js) - Google Analytics