关于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动态添加节点循环流程图表代码.zip”提供了一个使用jQuery实现动态添加节点并构建循环流程图的实例。下面将详细阐述相关知识点。 1. **jQuery选择器**:jQuery的核心功能之一就是选择器,它允许...
一、jQuery节点操作 1. 选择器:jQuery提供了丰富的选择器,如ID选择器(#id)、类选择器(.class)、元素选择器(element)等,用于快速定位DOM元素。例如,`$("#myID")`将选取ID为"myID"的元素。 2. 获取和设置节点:`...
在网页开发中,jQuery 和 JavaScript 都提供了创建和操作 DOM 节点的方法,但它们在语法和效率上存在一定的差异。本篇文章主要探讨了两者在创建节点方面的区别。 首先,我们来看一下创建一个 h1 标签并将其作为 div...
实现这一功能的关键在于维护好树的结构,并确保添加或删除节点后,菜单的显示和交互依然正确。 例如,当用户点击"添加父节点"按钮时,我们可以: 1. 创建一个新的父节点元素,设置其文本和必要的样式。 2. 使用...
这将会为每个匹配的元素创建一个新的`<div>`,并将其作为这些元素的父节点。 **.wrapAll()** ```javascript $('selector').wrapAll('<div class="container"></div>'); ``` 这里,所有匹配的元素会被同一个`<div ...
总结来说,jQuery的`replaceWith()`和`replaceAll()`方法为开发者提供了强大的工具,使动态更新和修改网页内容变得更加便捷。它们是构建交互式Web应用程序的关键部分,熟练掌握这些方法对于提升前端开发效率至关重要...
### Jquery节点插入、复制和替换方法 #### 一、插入 在JQuery中,提供了多种方式来插入新的DOM节点,这些方法可以帮助开发者更灵活地操作网页结构。 ##### 内部插入节点 内部插入指的是在目标元素内部进行新节点...
本文实例讲述了JQuery创建DOM节点的方法。分享给大家供大家参考。具体分析如下: 用JQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点,然后可以用attr()方法来获取元素的各种属性的值。但真正的DOM...
通常,你可以为包含子菜单的`<li>`元素添加一个`class`(如`hasChildren`),并在点击时切换这个`class`,同时用CSS控制子菜单的显示和隐藏。 5. **数据绑定**:如果数据来源于服务器,你可能需要使用Ajax请求获取...
2. **jQuery节点的插入** - **内部插入**:`append()`和`appendTo()`用于在元素内部添加内容。它们的主要区别在于调用方式,`append()`将内容添加到选择的元素内部,而`appendTo()`则是将选择的元素添加到另一个...
无论是获取子节点还是当前节点的属性值,还是绑定事件处理器响应用户交互,jQuery都提供了一套简洁的API。本文所提供的代码片段和概念,对于Web开发人员来说是十分实用的基础知识。通过这些方法,开发者可以更加灵活...
在这个例子中,通过JQuery创建了一个type为"text"的input元素,并且同样通过对象字面量的方式设置了其value属性和两个事件处理函数:当输入框获得焦点时添加'active'类,失去焦点时移除'active'类。最后,也将创建的...
在网页开发中,经常遇到需要根据用户需求动态添加或删除输入框的情况,比如购物车的商品数量增减、表单的自定义字段等。jQuery,作为一款强大的JavaScript库,提供了丰富的API来简化这类操作。本文将深入探讨如何...
4. **数据格式**:ZTree的数据格式通常为JSON数组,每个元素代表一个树节点,包含`id`、`name`、`pId`(父节点ID)等属性。 ```javascript [ { id:1, pId:0, name:"父节点1"}, { id:2, pId:1, name:"子节点1-1"}, ...
- 灰太狼的状态切换,例如“快乐”、“愤怒”,通过修改`class`属性来改变样式。 五、步骤详解 1. 导入jQuery库:在HTML文件头部引入jQuery库,通常通过CDN链接。 2. 创建HTML结构:设定灰太狼的图片和相关元素,并...
总的来说,jQuery提供的遍历和属性操作功能极大地简化了JavaScript中的DOM操作,使得开发者能够更加专注于业务逻辑而不是底层的DOM操作。理解并熟练运用这些技巧,能够提高开发效率,优化代码质量。对于jQuery遍历...
DOM是一个编程接口,用于HTML和XML文档,它将文档表示为树形结构,每个节点代表文档的一部分,如元素、属性或文本。通过DOM,我们可以查找、访问、修改和删除文档的任何部分。 1. **创建新元素** 使用`document....
// 为h1对象创建属性节点class,并设置属性值 var txt = document.createTextNode("jQuery与JavaScript创建节点比较"); // 创建文本节点 h1.appendChild(txt); // 将文本节点添加到元素节点中 div.appendChild(h1);...
3. **jQuery初始化**:在页面加载完成后,通过jQuery选择器找到树形结构的容器,并为其添加点击事件监听器。 4. **Ajax请求**:当用户点击节点时,使用jQuery的`$.ajax()`或`$.get()`方法发送异步请求到服务器,...
### jQuery动态树实现详解 #### 一、简介 在现代Web开发中,树形结构是一种常见的数据展示形式,尤其在管理后台系统中用于展现多层级数据。jQuery作为一款优秀的JavaScript库,提供了丰富的DOM操作功能,使得...