jquery append添加的元素click获取不到的解决方法

最新推荐文章于 2024-04-17 08:42:00 发布
最新推荐文章于 2024-04-17 08:42:00 发布
阅读量748 收藏 4
点赞数 4
分类专栏： Work 文章标签： jquery js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WhaleFallljf/article/details/109409262
版权

jquery append添加的元素click获取不到的解决方法

场景就是因为我是通过append方法把很多个相同的理解为产品的东西加入到一个div中，因为后面的很多产品都没有绑定上这个事件，因为是加载完这个js之后，根据代码的加载顺序就是已经把这个内容加载完了,按照下面的写法就可以给dom中所有的是class="div"的元素绑定上事件了，因为这些是后面append进去的dom所以可能会绑定不到.。

第一种错误的写法

$('.div').click(function(){});

第二种正确的写法

 $(document).on('click','.div',function (){})

参考链接：
jq append添加的元素click获取不到的解决方法

一只像咸鱼的小鲸鱼.
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JS中appendChild追加子节点无效的解决方法
01-19
JS中appendChild追加子节点无效 有这么一段代码： let divs = document.getElementsByClassName('test'); let btn = document.createElement('div'); for(let i=0;i<divs.length;i++){ divs[i].appendChild(btn); } 表面上这段代码为每个 class属性为 test的元素添加一个 div子元素。 看起来没有什么问题，但是执行完之后却发现子元素并没有成功添加，也没有报错。 这其实是因为一个元素只能有一个父元素，上面这段代码试图将 btn添加到多
jquery获取不到动态append元素的值
云别
12-04 3040
1.问题： jquery获取不到动态append的input框的值 在处理一些逻辑的时候，我们可能会使用到动态append一些元素到页面上，这也会有一些问题 比如，append上的元素通过各种选择器获得的都是null，或者undefined。 2. 如何解决 这里介绍一下我经常使用的方法，适用与不同的场景 2.1 在append后直接绑定事件/获取值 在我们append一个元素的时候，直接在其js...
JQuery 两种方法解决刚创建的元素遍历不到的问题
11-23
刚创建的元素，使用jQuery的each方法来遍历，有时候会不起作用。 原因不用多说，经常使用javascript的人应该都会知道，解决方案大致有2种： 1、刚创建完元素的时候，就立刻使用each方法 复制代码 代码如下: $(‘#btn’).on(“click”, function(){     $(‘#div’).append(“<input type=’text’ />”);     $(“input”).each(function(){         //TODO:     }); }); 2、使用setTimeout方法在页面加载完成一段时间后再使用each方法 复制代码 代码如
javascript通过appendChild(dom)方法插入一个dom元素无效
m0_60721967的博客
04-17 378
世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
关于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如何获取动态添加的元素
qq_41657790的博客
07-06 1万+
开发工具与关键技术：Visual Studio 2015、C# 作者：曾浩源 撰写时间：2019年07月06日 一、问题描述 使用jQuery的append()方法动态添加了一段html代码之后，发现在为新添加的元素绑定click事件时无法获取该新元素。 为什么会无法获取到这个新添加的元素呢？我一开始就去实验了一下，发现，可以获取到啊？ 后来我把两段代码互换一下位置，把绑定click事件放到前面...
jquery append添加的元素用jquery无法获取到
IT技术宅-北方的刀郎
04-12 1927
当获取$("#art-list")页面元素后去在后面追加标签的时候（append），在下面用 $(selector) 获取刚刚添加的标签，发现怎么都获取不到。 因为页面已经将JS加载完毕，此时新增请求动态添加节点，自然获取不到,也不会为append的元素初始化添加事件 需要事件委托才能获取到节点，也就是说要用： $(selector).on(events,[selector],[data]...
jQuery动态append添加元素后点击事件失效
1 Byte 的博客
12-21 1480
1. 问题描述：在div中动态添加span元素，之后执行$(selector).click(function(){var param = $(this).text();})无法触发事件。 2. 原因：append中的节点是在整个文档加载完之后开始添加，页面不会为append的元素初始化添加点击事件，故使用这种方式动态添加的节点中的click事件没有生效。 3. 解决方案：事件委...
解决jQuery使用append添加的元素事件无效的问题
12-12
jquery api官方的例子在新增的元素上添加事件 $[removed]("click",'#lyysb a',function(){ if(!$(this).hasClass('cur')){ $(this).addClass('cur');...注意：使用 on() 方法添加的事件处理程序适用于
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
11-25
支持给动态元素和属性绑定事件的是live和on，其中live在JQUERY 1.7之后就不推荐使用了。现在主要用on，使用on的时候也要注意，on前面的元素也必须在页面加载的时候就存在于dom里面。动态的元素或者样式等，可以放在...
jQuery修改CSS伪元素属性的方法
01-19
CSS伪元素（pseudo elements）不是DOM元素，因此你无法直接选择到它们。 假设有如下HTML代码： <div class=techbrood id=td_pseudo>techbrood introduction 和CSS代码： .techbrood:before { width: 0; } 现在你想...
jQuery详细教程
04-25
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件 $(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件 四. jQuery实例 jQuery hide() 演示简单的 jQuery hide() ...
node-v9.6.0-x86.msi
04-29
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
Python基于机器学习的分布式系统故障诊断系统源代码，分布式系统的故障数据进行分析，设计故障诊断模型，高效地分析并识别故障类别
04-29
基于技术手段（包括但不限于机器学习、深度学习等技术）对分布式系统的故障数据进行分析，设计故障诊断模型，高效地分析并识别故障类别，实现分布式系统故障运维的智能化，快速恢复故障的同时大大降低分布式系统运维工作的难度，减少运维对人力资源的消耗。在分布式系统中某个节点发生故障时，故障会沿着分布式系统的拓扑结构进行传播，造成自身节点及其邻接节点相关的KPI指标和发生大量日志异常
JavaScript前端开发的核心语言前端开发的核心语言
最新发布
04-29
javascript 当今互联网时代，JavaScript已经成为了前端开发的核心语言它是一种高级程序设计语言，通常用于网页的交互和动态效果的实现。JavaScript的灵活性以及广泛的使用使得它变得异常重要，能够为用户带来更好的用户体验。 JavaScript的特点之一是它的轻量级，它可以在网页中运行无需单独的编译或下载。这意味着网页可以更快地加载并且用户无需安装额外的软件才能运行网页上的JavaScript代码。此外，与HTML和CSS紧密结合，可以直接在HTML文档中嵌入，使得网页的开发变得非常便捷。 JavaScript具有动态性，它可以在浏览器中实时修改页面内容和样。它可以通过操作DOM（文档对象模型来动态地修改网页的结构和布局，并且可以根据用户的行为实时地响应各种事件，如点击、标悬停、滚动等。这使得开发者可以轻松地为网页添加交互性和动态效果，提供更好的用户体验。 JavaScript也是一种面向对象的语言。它支持对象、类、继承、多态等面向对象编程的概念，使得代码结构更加清晰和可维护。开发者可以创建自定义的对象和方法，对功能进行封装和复用，提高代码的可读性和可维护性。
四则运算自动生成程序安装包
04-29
四则运算自动生成程序安装包
基于Linux的私有文件服务器(网盘).zip
04-29
基于Linux的私有文件服务器(网盘)
js中append方法参数
07-28
在JavaScript中，append方法用于将一个元素添加到另一个元素的末尾。参数可以是一个节点对象，也可以是一个字符串。如果参数是一个节点对象，可以直接传递该对象作为参数，不需要使用引号包围。例如，使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值