通过append添加的div 点击事件无效

最新推荐文章于 2024-01-03 19:51:01 发布

翻译最新推荐文章于 2024-01-03 19:51:01 发布 · 1.5k 阅读

文章标签：

#js #html

烂笔头同时被 3 个专栏收录

14 篇文章

订阅专栏

11 篇文章

订阅专栏

html

5 篇文章

订阅专栏

博客介绍了为类名相同的节点添加事件的方法，通过$(document).on(“click”,“指定的元素”,function(){})将指定事件绑定到document上，新产生且符合指定元素的节点也会绑定此事件。

为类名相同的节点添加事件

$(document).on(“click”,“指定的元素”,function(){});是将指定的事件绑将document上，只要而新产生的元素符合指定的元素，就会绑定此事件。

$(document).on("click",".class名",function(){
        var id = $(this).attr('id');
        .....
    })

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

西红柿多钱一斤

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

关于append标签后，点击事件不可用的解决方法

weixin_39724194的博客

04-15

669

今天写前端，用了append追加了一个含点击事件的文本框后，点击事件没反应。 append的代码： var times = '<div class="row cl">\n' + '\t\t\t\t\t<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span&g...

JS动态append之后点击事件无效

weixin_45127183的博客

06-07

2132

今天做项目用了append向HTML里面添加结构代码，代码添加之后，单击事件就没反应了。搞得我一脸懵逼，调了代码很久实在不行，我百度了一下才发现，append添加的节点单击事件是不会生效的。原因：原来append中的节点是在整个文档加载后才添加的，页面并不会为未来的元素初始化添加点击事件，所以使用这种方式动态添加的节点中的点击事件不会生效。解决方法：于是我只好改用事件代理来完成这次我的项目...

参与评论您还未登录，请先登录后发表或查看评论

解决jquery中，使用append增加元素时，该元素的绑定监听事件失效的办法

JamesCole的博客

10-09

6046

实现格式如下： $("outerSelector").on("eventType","innerSelector",function(){}); 举例：如果想要设置一个在中append的一个id="demo"的按钮的点击事件，则可以这样写： $(".title").on("click", "#demo", function(){});

解决append的div的事件失效问题

以秘

08-10

2634

原来div里有一个关闭按钮，点击后可以把该div删除掉。现在新增一个按钮，点击这个按钮就可以动态添加和原来的div相同的div。实现点击新添加的div里的按钮，也想要实现删除该按钮所在的div。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>测...

js动态append添加的节点点击事件无效

热门推荐

DUDUfine的专栏

06-19

1万+

js动态append添加的节点点击事件无效问题

vue项目中给div加点击事件，不生效

nss33678的博客

01-03

2000

首先查看，样式重有没有，position，relative, absolute，这样的属性。如果没有找到的话，就到上一级，上上一级父元素中寻找🧐，。把本div的，z–index的层级升高，就可以生效了。

解决jQuery使用append添加的元素事件无效的问题

12-12

总结来说，解决jQuery中使用`.append()`添加元素后事件无效的问题，关键在于使用`.on()`方法，并将事件绑定到尽可能接近动态元素的静态父元素上，以减少事件冒泡带来的性能开销。同时，理解`.on()`, `.off()`, 和 `....

解决layui动态添加的元素click等事件触发不了的问题

12-13

在页面加载完成时候 ‘.add_project’ 元素是可以触发click时间的，当动态添加 ‘.add_project’ 时候，新添加的元素却触发不了click事件，类似下面的写法： $(".add_project").on('click', function(){ alert&#40...

解决使用layui对select append元素无效或者未及时更新的问题

12-30

本人在使用layui使用了select按钮，点击是js脚本会异步请求后台接口获取json数据，然后layui将json数据渲染到select上，然而获取接口数据没有问题，就是无法更新。本人使用代码如下： <div class=main> <div ...

系列教程之jQuery动态append添加元素click点击事件失效

种麦南山下的博客

10-26

2478

最近开始做前端，遇到一些问题，现在记录一下，以备不时之需。问题描述：在div中动态添加span元素，之后执行 $(selector).click(function(){ var param = $(this).text(); }) 无法触发事件。原因：append中的节点是在整个文档加载完之后开始添加，页面不会为append的元素初始化添加点击事件，故使用这种方式动态添加的节点中的click事件没有生效。解决方案：事件委托方式解决，将指定的事件绑定在document上，只要appe

解决手机浏览器中div append元素失败

知足常乐

08-15

1391

最近在做一个web项目，遇到了一个问题，那就是div中的元素用append来追加的元素，pc端能正常的显示，而到了手机浏览器中，却没有生效，以至于查了很多资料，都没有找到其解决的方法，最后才发现用appendChild代替append，就解决了其问题，在此做一个记录，希望遇到此问题的同学可以谨记。

jq 创建的div中添加点击事件无效 append元素之后 点击事件失效

PHP,Java--在世悟空的博客

08-29

1117

<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>冒泡</title> 载入jq <script src="jquery.min.js" type="text/javascript"></script> <style> #demo{width:100px;height:100px.

append动态生成的元素，无法触发事件的原因及解决方案

MeYeah!的博客

02-26

747

使用append动态生成的元素事件绑定失效了。 click（fn）当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。而新添加的元素自然没有绑定到事件。使用$(document).on(‘事件类型’,‘要选择的元素’,function(){})方法为元素绑定事件on方法包含很多事件，点击，双击等等事件。与click(fn)相比，二者在绑定静态控件时没有区别，但是如果面对动态产生的...

【解决】div append 之后失效

heshouwu_1026的博客

12-14

913

【解决】div append 之后失效

jquery append添加的元素事件无效

对代码不满足，是任何真正有天才的程序员的根本特征。

05-05

4941

在jquery.js 版本为1.9以上live属性更改成on $(document).ready(function(){ $(".load-more").click(function() { for (i = 0; i < 10; i++) { $("#aaa ul").append("aaaaaaa"); } }

当使用append添加元素时，使用元素内的方法，方法内的参数解析错误解决办法

qq_36826248的博客

09-19

2222

情形一：当使用append添加元素时，使用元素内的方法，方法内的参数解析错误，如下图所示情况，解决办法：使用转义字符去除空格，就ok啦情形二：当使用append添加元素时，append添加出来的id点击事件无效，比如在#append_parent中添加_html，想使用也想对动态增加的节点绑定#fwin_dialog_delete点击事件无...

处理用append添加的元素用onclick绑定无效的事件

qq_41720578的博客

03-17

597

问题是：通过jQuery append（或者before、after，一样）新添加进网页的元素，常用的事件不能触发，比如：append了id 为 abc 的元素，那么 $(#abc).click(function(){})是没有效果的。网上说要用live()函数，亲测无效，应该是jQuery的版本问题，反正到目前为止是不能用了；解决方法：用on函数，要注意格式(楼主搞了半天，因为格式不对，哎，不说了…都是泪) 正确格式： $("outerSelector").on('eventType','

JS append后获得的id、class 无法通过获取节点添加点击事件

weixin_44394502的博客

04-03

1275

原因：append中的节点是在整个文档加载后才添加的，页面并不会为未来的元素初始化添加点击事件，所以使用这种方式动态添加的节点中的点击事件不会生效。根据共同的父级div是在HTML结构中的，所以将循环获得的单击事件代理给div，通过单击获得的class名来判断点击的是哪一个对象，再进行具体操作。解决方法：事件代理。

jQuery动态append添加元素后点击事件失效

1 Byte 的博客

12-21

1903

1. 问题描述：在div中动态添加span元素，之后执行$(selector).click(function(){var param = $(this).text();})无法触发事件。 2. 原因：append中的节点是在整个文档加载完之后开始添加，页面不会为append的元素初始化添加点击事件，故使用这种方式动态添加的节点中的click事件没有生效。 3. 解决方案：事件委...

删除和添加 div 盒子 jquery

最新发布

11-15

<think> 我们正在处理用户关于使用jQuery删除和添加div盒子的方法的问题。根据引用内容，我们可以总结如下： 1. 引用[1]中展示了如何动态删除节点和添加节点。 - 删除节点：使用事件委托（因为节点可能是动态添加的）来监听删除按钮的点击事件，然后通过`$(this).parent().parent().remove()`来删除整个`dl`元素。 - 添加节点：通过拼接HTML字符串创建一个新的`dl`元素，然后使用`insertBefore`方法将其插入到指定元素（这里是类名为`clear`的元素）之前。 2. 引用[2]中提到了jQuery遍历元素、创建元素、添加元素和删除元素的汇总。其中删除元素可以使用`remove()`方法，添加元素可以使用如`append()`, `insertBefore()`等方法。 3. 引用[3]主要讲的是CSS样式，与当前问题关系不大。因此，我们可以给出以下步骤： ### 添加div盒子 1. **创建div元素**：可以使用jQuery的`$()`函数来创建，例如：`var newDiv = $('<div>');`。也可以直接使用HTML字符串创建，如引用[1]中的方式：`let node = "<div>...</div>";`。 2. **设置内容与属性**：在创建时可以直接在HTML字符串中包含内容，或者使用jQuery方法如`text()`, `html()`, `attr()`等来设置。 3. **添加到DOM树**：可以使用以下方法之一： - `append()`：将元素插入到指定元素的内部末尾。 - `prepend()`：将元素插入到指定元素的内部开头。 - `after()`：在指定元素之后插入（同级）。 - `before()`：在指定元素之前插入（同级）。 - `insertBefore()`：将元素插入到指定元素的前面（同级），如引用[1]中的`$(node).insertBefore($(".clear"));`。 ### 删除div盒子 1. **选择要删除的元素**：使用jQuery选择器选中要删除的div盒子。 2. **删除操作**：使用`remove()`方法。如果删除按钮在div盒子内部，可以通过事件委托来绑定事件，然后找到要删除的div并移除。例如： ```javascript $(document).on('click', '.delete-btn', function() { $(this).closest('div').remove(); // 或者根据结构使用parent()等 }); ``` 这里使用`closest('div')`来找到最近的div祖先元素，然后删除。如果结构固定，也可以使用`parent()`等。 ### 示例代码假设我们有一个容器`#container`，里面有一些div，每个div有一个删除按钮。我们想要实现点击删除按钮删除该div，以及一个添加按钮来添加新的div。 ```html <div id="container"> <div class="box"> 盒子1 <button class="delete-btn">删除</button> </div> <div class="box"> 盒子2 <button class="delete-btn">删除</button> </div> </div> <button id="add-btn">添加盒子</button> ``` ```javascript $(function() { // 添加事件委托来处理删除按钮（包括动态添加的） $(document).on('click', '.delete-btn', function() { // 删除当前按钮所在的div盒子 $(this).closest('.box').remove(); }); // 添加新盒子的按钮 $('#add-btn').click(function() { // 创建一个新的div盒子，并添加一个删除按钮 var newBox = $('<div class="box">新盒子 <button class="delete-btn">删除</button></div>'); // 添加到容器中 $('#container').append(newBox); }); }); ``` ### 说明 - 使用`closest('.box')`可以确保我们找到包裹该按钮的div盒子，即使结构稍有变化也能适应。 - 事件委托（使用`on`方法并绑定到`document`或一个静态父元素）使得动态添加的按钮也能触发事件。 - 添加新盒子时，我们直接创建了一个包含删除按钮的div，然后添加到容器末尾。 ### 注意事项 - 如果页面中已有大量元素，事件委托最好绑定到最近的静态父元素（如`#container`）而不是`document`，以提高性能。 - 创建元素时，如果内容复杂，使用HTML字符串创建可能更方便；如果简单，则可以使用jQuery方法逐步构建。 ### 相关问题 1. 如何优化大量动态元素的事件委托性能？ 2. jQuery中还有哪些添加元素的方法？它们有什么区别？ 3. 如何给动态添加的元素绑定事件而不使用事件委托？希望这个回答能帮助您解决问题！ </think> ### 使用jQuery删除和添加div盒子的方法 #### 一、删除div盒子的方法 1. **基础删除操作** 使用 `remove()` 方法直接删除选中的div元素： ```javascript // 删除所有class="box"的div $(".box").remove(); // 删除特定id的div $("#targetDiv").remove(); ``` 2. **动态生成元素的删除**（事件委托）通过事件委托处理动态添加元素的删除，使用 `on()` 方法： ```javascript $(document).on('click', '.del-btn', function() { // 删除当前按钮的父级div（根据实际结构调整） $(this).closest('div').remove(); }); ``` ✅ **优势**：对动态添加的元素有效，无需重复绑定事件[^1]。 --- #### 二、添加div盒子的方法 1. **创建新div并插入** 使用 HTML 字符串创建元素，通过插入方法添加到DOM： ```javascript // 创建带内容的div const newDiv = $('<div class="new-box">新盒子内容</div>'); // 插入方式（根据需求选择） $("#container").append(newDiv); // 插入到内部末尾 $("#refElement").before(newDiv); // 插入到元素前 $(".clear").after(newDiv); // 插入到元素后 ``` 2. **克隆现有div** 使用 `clone()` 复制已有元素： ```javascript const clonedDiv = $(".template").clone(); clonedDiv.removeClass("template"); // 移除模板类名 $("#container").append(clonedDiv); ``` --- #### 三、完整示例代码 ```html <div id="container"> <div class="box">盒子1 <button class="del-btn">删除</button></div> </div> <button id="addBtn">添加盒子</button> ``` ```javascript $(function() { // 添加新盒子 $("#addBtn").click(function() { const newBox = $('<div class="box">新盒子 <button class="del-btn">删除</button></div>'); $("#container").append(newBox); }); // 删除盒子（事件委托） $(document).on('click', '.del-btn', function() { $(this).parent().remove(); // 删除父级div }); }); ``` ▶️ **效果**： - 点击"添加盒子"按钮会在容器内添加新div - 点击每个div内的"删除"按钮可删除该div --- #### 四、关键注意事项 1. **事件委托必要性** 动态添加的元素必须通过 `$(document).on()` 绑定事件，直接使用 `click()` 无效[^1][^2]。 2. **元素定位技巧** - `parent()` / `parents()`：向上查找父元素 - `closest('div')`：向上查找最近的div - `find()`：向下查找子元素 3. **性能优化** 将事件委托从 `document` 改为最近的静态容器： ```javascript $("#container").on('click', '.del-btn', function() { ... }); ```