jquery的动态元素绑定事件失效解决办法

jQuery绑定动态元素的点击事件无效 之前就一直受这个问题的困扰,在写ajax加载数据的时候发现,后面追加进来的demo节点元素,失去了之前的点击事件。为什么点击事件失效,我们该怎么去解决呢?那么,我们通过下面的示例简单说明。 示例如下: <div> <ul id="demo"> <li>Kubernetes:下一代分布式系统的护戒使者</li> <li&g... 阅读详情

使用Jquery的on绑定事件,给此动态节点的父元素(非动态节点)绑定。

即:$("父元素").on("事件",“动态子元素”,function(){

执行函数;

});

例如为body(父元素)下的一个动态添加的id="btn"(子元素)的标签绑定点击事件:

   $("body").on("click", "#btn", function() {
执行函数;
   });

jQuery使用bind动态绑定事件无效的处理方法 最近在进行页面开发,在做页面特效的时候,需要给一个动态加载的按钮赋予一个事件 于是不假思索的 用$(obj).bind();  来绑定事件 。 但是这样存在一个问题: bind确实能绑定事件,但是那是相对于固定的html标签来说 当页面内容属于动态加载的时候,bind事件就存在一个bug,  只能bind一次,当你第二次触发事件的时候就没用了 例如: 我给<a>标签赋予一个click , <a>标签包括内容都是从后台数据读取然后动态加载的。当我使用bind来绑定click事件,这时, 第一次点击click能成功触发 但是第二次点击,click事件无效了. 后面研究发现,jQuery还有个绑定事 立即下载

相关推荐

OpenWebUI联网搜索实战:如何用SearXNG让本地大模型获取实时信息(附百度/360配置)

本文详细介绍了如何通过部署开源元搜索引擎SearXNG,为本地运行的OpenWebUI大语言模型(如Qwen、Llama)配置联网搜索功能,解决其知识库过时的问题。文章重点讲解了SearXNG的Docker部署、集成国内搜索引擎(如百度、360)的配置方法,以及如何与OpenWebUI无缝对接,从而实现本地大模型获取实时、准确的中文信息,提升其实用性。

weixin_28835583的博客 1887

jQuery ajax使用$(this).parent()无效解决方法

div=$(this).parent(); //先获取父级元素 div.remove(); //再删除 $(".delStu").click(function () { td = $(this).parent().parent(); if (c...

542

springboot+shardingsphere+druid 实现基于时间的水平分表

使用shardingsphere基于时间字段的动态水平分片。

weixin_42207940的博客 2628

jquery 使用 on 绑定 a标签无效 只能用 live

如题

z69183787的专栏 4776

浏览器Cookie迁移实战:从Chrome导出导入登录态全攻略

Cookie是浏览器保存的会话凭证,服务端通过Set-Cookie将登录态种在本地。迁移Cookie本质上是把服务端认可的会话标识搬到新环境,从而免去重复输入账号密码和二次验证的麻烦。在换电脑、切浏览器或重装系统时,掌握Cookie的导出导入技术能显著提升效率。Chrome与Edge同属Chromium内核,存储结构相似,但字段差异(如Domain、SameSite、Secure)常导致迁移失败。通过浏览器扩展或CDP脚本可实现跨浏览器登录态迁移,适用于内网后台、开发环境等场景。本文从原理到实践,梳理Coo

weixin_42533120的博客 345

STM32cube HAL库两条命令实现i2c通信---Nucleo L476RG用I2C实现tmp117模块温度读取并串口打印

Getting Started with STM32 - I2C Example

m0_54706625的博客 1835

jQuery 在ajax中使用$(this).parent()无效

需求:点击删除按钮时,调用后台controller删除数据,若删除成功将其所在的父元素块隐藏 开始方法: $(".jk_table").on('click','.btn',function(){ var autoId=''; $.ajax({ type:'post', url:'../del',        data:{autoId,autoId},        dataTyp...

叶落无痕的博客 1061

数据结构实验1 集合的交、并、差

姓名:Far_Rainbow 学号: 202505000X 专业: 软件工程 年级:2020级 实验名称:实验1 集合的交、并、差 实验内容: (1)实验目的 通过该实验,让学生复习巩固C语言中的循环结构、循环控制条件、分支结构和数组/链表、函数的调用等有关内容,体会到用数组存储集合时,需要记录集合元素的个数,否则输出结果会出现数据越界现象。 (2)实验内容 通过键盘,分别输入两个数据元素类型为正整数的集合A和B,以负数输入为结束条件,输出两个集合的交、并、差。 (3)实验要求 从程序完善性上考虑,集合元

Far_Rainbow的博客 2179

jquery隐藏html中的父级元素,用jQuery给父元素的父元素设置display:none为什么不起效啦?...

当我点击下图中的顶部左边的昨天的div(带下拉三角形的框)时候,显示下拉选项框。当我选中下拉框中的某项后,将其文本显示在顶部左边的div中,问题是:当我选中下拉框后,给整个下拉框div设置display:none;并没有生效隐藏,下面本人代码,请大神指点!HTML:昨天昨天过去7天过去30天自定义范围确定jquery:$('.manageReportForms_ipt').click(functi...

weixin_39607474的博客 521

Qwen-Image LoRA训练实战:从数据准备到异常修复的全流程解析

本文详细解析了Qwen-Image LoRA训练的全流程,从数据准备到参数优化再到异常修复。通过实战案例展示了如何利用LoRA技术微调Qwen-Image模型,提升中文场景下的图像生成质量,特别针对手脚生成异常等问题提供了有效解决方案。文章还分享了中文提示词优化技巧和高级训练方法,帮助开发者高效训练出高质量的LoRA模型。

lemon的博客 970

QtQuick QML教程(2):qml语法介绍

​ qml一个普通的文本文件,后缀是.qml, 一个qml文件主要由两部分组成:(1) import语句 :这个就像C++中的头文件, 使用 import 导入qml需要的相关模块,可以查询Qt文档进行导入,注意每个版本的Qt模块声明可能都不同,相比于QWidget项目,QtQuick的变动是很大的;(2) QML对象树 :根对象是Window, 然后可以在Window中添加各种控件,例如按钮,文本,菜单等。

琅嬛福地 551

jquery使用append动态增加元素,该元素绑定事件失效的解决办法

动态添加了些img元素,但click事件无效。应该是这样子的: $("outerSelector").on("eventType","innerSelector",function(){});  搜索了一下其他人的文章,多数帮助是用了ID选择器,没解决我的问题。原来应该是这样的: outerSelector必须是一直存在的元素,都直接用body好了,innerSele

running8的博客 3652

全志平台camera驱动开发(4)NVP6134芯片4路模拟视频BT656输入

前言 1. 调试平台: 全志V5/T7等有BT656或BT1120的并行接口,理论有DVP接口的一般都支持 2. NVP6134可使用多路视频同时输入 硬件连接 模拟camera1 模拟camera2 NVP6134 ------>NVCSI0 ...

jzwjzw19900922的博客 3534

网页动态更新的内容无法用jquery捕获

想要用ajax动态更新部分网页,这是ajax更新的内容, <button type='button' class="deleteButton" value="<?php echo $comment['cmtid']; ?>" style="margin:0px 20px 20px 20px;">删除</button> 这段内容后面跟了一个jquery选择器选中...

QingtaiSensei的博客 306

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

jquery点击事件失效原因和解决办法

这里写自定义目录标题jquery点击事件失效原因和解决办法 jquery点击事件失效原因和解决办法 原文地址:https://www.cnblogs.com/leiting/p/9323539.html 在使用jQuery绑定点击事件的时候,有时候会遇到点击无效,这种情况大多出现在动态添加元素的时候。 例如:给demo里添加li元素给li绑定点击事件 $("#demo").append('<li>点我</li>'); 给li元素绑定点击事件 // 示范一 $("#demo li

weixin_44886911的博客 4445

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

jquery html 动态添加元素绑定事件

                                                                 jquery html 动态添加元素绑定事件 点击表格每一行,弹出消息提醒。如果我们用js给表格添加一行,新添加的行点击事件失效。 当需要的内容还没有被插入时,选择器只会选择页面中已经存在的元素,所以事先没有存在元素是绑定不了事件的。 参考:jquery html ...

夏已微凉、 1135

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

jQuery动态添加按钮,绑定点击事件失效

jQuery动态添加按钮,绑定点击事件失效 因为需求需要给页面动态添加按钮并绑定点击事件进行操作, 但是发现绑定的点击事件失效。 原因分析: append中的节点是在整个文档加载完之后开始添加,因此页面不会为append的元素初始化添加点击事件 按钮失效代码: $(’.edit’).click(function(){ console.log(‘111111’); }) 解决办法: 使用事件委托的方式,将指定的事件绑定在document上。 $(document).on('click','.edit',fun

weixin_44363139的博客 2228

关于jquery 的绑定事件on 如何绑定动态生成的dom元素

今天遇到个问题,在table里面动态更新数据,然后每一行会绑定相应的点击事件 我原本是想用 可作用于未来元素的on方法,但是实际上还是没有起作用,代码如下: $(".form-table tbody tr").on("click",function () {}) 这段代码在页面加载时的表格中是起作用的,但是当ajax动态更新表格数据之后就不起作用了,原因是jq读到这段代码时,浏览器还没更

cysear的专栏 6629

动态生成dom元素时,jquery点击事件失效

这周在工作中遇到一些小问题,趁着不加班,来记录一下,好记性不如Mac键盘,啊哈哈先吟一句诗。 问题 页面上一些元素是通过js动态生成的,给这些元素绑定一些事件,比如点击,并不会生效,这是为什么呢? 解决方法 先说解决方法。 //监听新增DOM元素的点击事件 $('#domId').on('click','.newClass',function(){ //doSomething; }) //此...

团长的博客 2074

jQuery为动态生成的元素添加事件

我们会使用jQuery动态地生成许多子元素。 但是我们同时希望为jQuery动态生成的子元素(#oImg)添加响应事件,这时候使用传统的方法, 往往会失败。我们需要使用delegate()函数来替代原始方法。

sherine的博客 3951

【jquery】给元素addClass并绑定点击事件,点击事件不生效的解决办法

问题还原: 现有一个div,我们在点击时,把原来class给去掉,并给它添加一个新的class,然后监听这个新的class的点击事件,但是没生效。 代码如下: <body> <div class="open">展开</div> <script> $(".open").click(function () {//展...

qing_小诺的博客 4263

Ajax动态生成元素后无法绑定事件的Bug - JQuery的on()方法

前言 JQuery 1.4版本之后新增了 on 方法,这个用得比较多,on 方法是专门用来处理事件委派机制的,笼统的说 就是解决在你 Ajax 事件无法绑定到新添加的元素上的问题的,很多JQuery中的bug问题也都出现在这。 需求分析 使用Ajax获取数据,动态生成编辑等按钮,点击编辑按钮时无论如何都无法绑定点击事件。 效果图 问题分析 因为 Ajax 获取到数据后我们先生成了界面,因此在后...

李诺轩的博客 1254
上一篇: Centos 7下安装Mysql 5.5及修改Mysql字符集
下一篇: Tomcat服务器学习和使用
ys_code
博客等级 码龄10年 13粉丝 24原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值