live()解决Jquery采用append添加的元素事件无效和获取不到添加元素的值

最新推荐文章于 2022-04-12 09:52:30 发布
转载 最新推荐文章于 2022-04-12 09:52:30 发布 · 163 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/yyyya/archive/2013/01/10/2854939.html
文章标签：

#javascript #ViewUI

本文介绍如何使用 JQuery 的 live() 方法解决动态添加元素后事件无法绑定的问题，确保通过 append 添加的元素能够正常触发事件并获取其值。

live()解决Jquery采用append添加的元素事件无效和获取不到添加元素的值

转载于:https://www.cnblogs.com/yyyya/archive/2013/01/10/2854939.html

关于jQuery获取不到动态添加的元素对象的问题
丁哒哒的博客
09-17 3230
一、问题描述 功能：点击添加按钮，动态生成一条规格及参数的输入框，点击每一条后边的X即可删除该条数据。 问题：在添加多条规格、参数数据后，发现不能使用$('.close').click()获取动态添加的元素，只能获取到在原html中写死的元素。 <!-- 部分html--> <div class="ad"> <div class="weui-cell-...
jquery获取不到动态append元素的值
云别
12-04 3236
1.问题： jquery获取不到动态append的input框的值 在处理一些逻辑的时候，我们可能会使用到动态append一些元素到页面上，这也会有一些问题 比如，append上的元素通过各种选择器获得的都是null，或者undefined。 2. 如何解决 这里介绍一下我经常使用的方法，适用与不同的场景 2.1 在append后直接绑定事件/获取值 在我们append一个元素的时候，直接在其js...
解决jQuery使用append添加的元素事件无效的问题
10-18
今天小编就为大家分享一篇解决jQuery使用append添加的元素事件无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
jq append添加的元素click获取不到的解决方法
weixin_30702413的博客
07-19 599
移动端手机ios网页，apppend添加html class名用 on()方法没效果 解决方案：在html里面给需要点击的元素加一个onclick="javascript:void(0)" 就好了； 主要原因是之前dom中没有没有append添加的元素 解决方法就是在click之前重新获取添加后的dom, 贴代码： $(document).on('click'...
解决jQuery使用append添加的元素事件无效的方法
热门推荐
逸尘的专栏
03-17 3万+
jquery api官方的例子在新增的元素上添加事件 $(document).on("click",'#lyysb a',function(){ if(!$(this).hasClass('cur')){ $(this).addClass('cur'); } else { $(this).removeClass('cur'); } });on() 方法在被选元素及子元素上
jquery动态添加元素事件失效问题解决方法
10-25
总之，jQuery的`on()`方法是解决动态添加元素事件失效的关键，它通过在静态父元素上监听事件并转发给动态子元素，实现了对动态内容的事件处理。合理使用`on()`方法，能够帮助我们创建更加动态、响应式的Web应用。
jQuery实现在新增加的元素上添加事件方法案例分析
10-20
本文将介绍使用jQuery来实现在新增加的元素上添加事件的具体方法，通过实例说明，为读者提供解决方案与注意事项。 首先，我们要了解jQuery在处理动态内容的事件绑定上曾经使用过的方法，并且在新版本中这些方法的...
jQuery详细教程
04-25
='#']") 选取所有带有 href 值不等于 "#" 的元素。 $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。 jQuery CSS 选择器 jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。 下面的例子把所有 p 元素...
jquery 无法获取append追加的input的value的值
fyname的专栏
11-03 2154
//定义基本文件，并为该基本HTML，添加新的HTML文件 var tmpbox="关闭"; $("div.window_inner").append(tmpbox); 动态追加append的html 通过 var perf_tree_name = $.trim($("input#dlgbox").val...
关于append渲染出来的属性，怎么再次提取里面的值
xi_zang的博客
10-27 1869
最近用jquey做关于联动的，遇见渲染之后，得不到渲染得里面的值 例如 通过append渲染出 再通过渲染循环得到option，但是无论怎么怎么都得不到select中option对应的值 核心代码如下： function getProjectPart(carId,id) { $.getJSON(".....", {carId: carId,p_id:id}, function
live()解决Jquery采用append添加的元素事件无效的
dcyly2004的专栏
07-16 414
问题是这样的，我用 append 方法添加了一段html代码，代码里有一个删除链接，可是事实证明用 append 方法添加进去的html代码对jqurey的 click 事件没有任何反映。 最后经查找，找到了解决办法，很简单： 这是原来我写的没法执行的 click 方法：  // $("#page_p_s_addcontent .item-delete").click(funct
jquery append添加的元素用jquery无法获取到
IT技术宅-北方的刀郎
04-12 2142
当获取$("#art-list")页面元素后去在后面追加标签的时候（append），在下面用 $(selector) 获取刚刚添加的标签，发现怎么都获取不到。 因为页面已经将JS加载完毕，此时新增请求动态添加节点，自然获取不到,也不会为append的元素初始化添加事件 需要事件委托才能获取到节点，也就是说要用： $(selector).on(events,[selector],[data]...
[前端] jquery获取append追加的input值
网站前端/PHP/Android/其他
10-20 8275
假如，使用jquery通过append向弹窗中添加或向页面中追加input框（name="price"），想获取其中的值，这个解决方案比较出人意外，在测试的时候，往往会想不到这块，容易被绕进去…… 注意： 首先要确定你页面中有几个 name="price" 的input框，因为有些弹窗内容是写在页面中的，然后再通过append把页面中的这个input框追加到弹窗中，导致页面中有两个相同
jQuery给动态添加的元素加点击事件失效的原因以及解决办法
qq_44782585的博客
02-21 1859
一、问题描述 　　用jQuery的append()方法动态添加了一段html代码之后，发现在为新添加的元素绑定click事件时无法获取该新元素。 二、解决方法 使用jQuery的on（）方法添加元素。 三：具体代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>jQuery on()方法测试</title>...
关于js/jq对动态创建元素获取不到的问题分析讨论及扩展
李卓书
06-05 3226
问题 最近在项目中遇到了这样一个问题: 我需要动态改变一个div的class,改变他的样式,但是每一个class都需要绑定一个函数动作,但是通过增加删除class后就获取不到这个元素了 问题复现 html <body> <div class="cl1"></div> </body> css .cl1{ widt...
JQuery获取不到动态加载的html元素的解决方案
lzlangzi528的专栏
04-17 3246
背景：把勾选的子页面数据在父页面进行展示，并需要对新加载数据进行删除。 原处理方式： <a class="link-a btn-green" href="javascript:;" onclick="delResource()" >删除</a> 这种方式取不到动态加载的数据 修改后的处理方式： <a class="link-a btn-green" href...
关于Jquery append 动态添加元素后，获取不到元素对象情况
Liam1994的博客
11-15 1万+
当我请求ajax后，将得到得值添加到 元素id="launcher_frame_body" 后，在页面怎么也监听不到元素里面的各种事件 $("#launcher_frame_body").append(json.data); 在网上查找资料后，发现从1.9开始要用jquery.on()事件来获取未加载页面元素内容； 对该事件简要讲解 $(selector).on(events,[s
jquery append添加了元素后 在之前添加的元素中在添加元素
最新发布
06-02
<think>好的，我现在需要解决用户的问题：在使用jQuery的append方法添加元素后，如何在已添加的元素中继续添加子元素。首先，我得理解用户的需求。用户可能在动态生成页面内容，比如先添加一个父元素，然后在这个父元素里再添加子元素。根据引用中的资料，比如引用[1]提到append()是在被选元素的结尾插入内容，而prepend()是在开头。用户已经知道如何用append添加元素，但后续如何继续操作这些新元素是关键。可能需要先保存对新元素的引用，或者通过选择器再次选中它们。接下来，我需要考虑jQuery的特性。当使用append()添加元素后，这些元素会立即成为DOM的一部分。因此，可以通过jQuery选择器来选中它们，或者使用变量保存它们的引用。例如，用户可能在第一次添加时，生成一个带有特定类或ID的元素，之后通过这个标识来找到它并添加子元素。 引用[3]中的例子显示，通过点击按钮，将ol中的li元素添加到ul中。这说明动态添加的元素可以被选择器找到，尤其是在事件处理中。但如果在非事件上下文中，可能需要确保元素已经被正确插入DOM，才能继续操作。另外，引用[2]提到创建元素后需要用.appendChild()来插入，但jQuery的append方法已经处理了插入，所以用户不需要手动调用DOM方法。不过，用户可能需要链式操作或者保存新元素的jQuery对象，以便后续操作。 可能的解决方案包括：在第一次append时，返回新创建的元素并保存到变量中，之后使用这个变量来追加子元素。或者，给新元素添加特定的类或属性，之后通过选择器选中它们。例如：var $newDiv= $('<divclass="parent"></div>'); $('#container').append($newDiv);//后续操作$newDiv.append('<span>子元素</span>'); 或者，使用jQuery的.append()方法的回调函数，但可能不太适用。另一种方法是使用事件委托，但用户的需求可能不需要事件处理，只是静态添加。需要确保用户在添加元素后，能够正确获取到这些元素的引用。如果用户没有保存引用，可能需要通过遍历或选择器来定位这些元素。例如，使用类选择器：$('#container').append('<div class="new-parent"></div>'); //之后$('.new-parent').append('<p>子元素</p>'); 但要注意，如果页面中有多个.new-parent元素，这样会全部添加。所以可能需要更精确的选择器，比如使用ID或者上下文限制。 总结，用户的问题可以通过在添加父元素时保存其jQuery对象，或者通过选择器再次选中已添加的父元素，然后继续使用append()添加子元素。同时要确保DOM已经更新，选择器能正确找到新元素。</think>在使用jQuery的`append()`方法添加元素后，可通过以下两种方式在已添加元素中继续添加子元素： --- ### 方法一：保存元素引用 在首次创建元素时，将其保存为jQuery对象变量，后续直接操作该变量： ```javascript // 首次添加父元素 var $parent = $('<div class="parent"></div>'); $('#container').append($parent); // 在已添加的父元素中追加子元素 $parent.append('<span class="child">子元素</span>'); ``` - **优点**：直接通过变量操作，无需重复查找元素 - **适用场景**：需要多次操作同一元素的场景 --- ### 方法二：动态选择器定位 通过类名、ID或层级关系选择器定位已添加的元素： ```javascript // 添加父元素（带唯一标识） $('#container').append('<div class="parent" id="parent-1"></div>'); // 通过选择器定位并追加子元素 $('#parent-1').append('<span>子元素</span>'); ``` - **注意**：需确保选择器的唯一性，避免误选其他元素[^1] --- ### 链式操作示例 结合jQuery的链式调用特性，实现连续追加： ```javascript $('#container') .append('<div class="parent"></div>') .find('.parent:last') // 定位最后一个新添加的父元素 .append('<span>子元素</span>'); ``` --- ### 关键点总结 1. **DOM更新时机**：`append()`会立即更新DOM，因此新元素可直接操作[^2] 2. **选择器优化**：建议为动态元素添加唯一类名或ID，提升查找效率 3. **性能建议**：批量操作时优先使用文档片段（`DocumentFragment`）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值