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

最新推荐文章于 2023-04-03 23:49:14 发布
最新推荐文章于 2023-04-03 23:49:14 发布
阅读量2.1k 收藏 4
点赞数 1
CC 4.0 BY-SA版权
分类专栏： JS webstorm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45127183/article/details/91128607
在项目中使用append动态添加HTML结构后，发现点击事件无法触发。原因是append的节点在文档加载后添加，因此点击事件未被初始化。解决办法是采用事件代理，将事件绑定到共同父级元素上，通过class名判断并执行相应操作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

<main class="container" style="margin-top: 50px;margin-bottom: 50px">
    <div class="row content" id="content">

    </div>
</main>

append的代码：我把下面这段代码，加在content里面

  $('#content').append(`
       <div class="col-md-6">
          <img src="img/cart.png" class="addcart">
       </div>
       <div class="col-md-6">
           <img src="img/buy.png" class="buy">
       </div>
 `);

最终效果：
效果图
事件代理：
思路：因为最开始他们共同的父级content是在HTML结构中的，所以将两个单击事件代理给c

最低0.47元/天 解锁文章

200万优质内容无限畅学
jquery on()事件 append追加内容事件失效处理
qq_15058425的博客
07-04 7060
先上HTML代码： 新增一行 姓名 年龄 性别 操作 windy 19 男 删除 js代码：   $(function(){ $("#add").click(function(){ var h=""+ "justin"+ "30"+ "男"+ "删除"+ "" $("table").append(h);
js append html 后点击点击事件和样式不生效
zhengxiaoya2017的博客
08-01 1892
最近在做一个点击一个按钮追加一行的功能时，发现通过js代码append 的html 的点击事件和页面样式不生效。 var tr = "<div id='appendDiv"+i+"' class='form-row'> " + " <div class='form-group col-1'><label>
JS append添加后的元素点击事件无效实践与分析
qq_35779012的博客
10-08 1247
原因： append的节点是在整个文档加载完成后才添加的，页面并不会为未来的元素初始化添加点击事件，所以使用这种方式动态添加的节点中的点击事件不会生效. 解决办法： 用事件委托的方法解决 demo如下： 或者: $(document).on("click",".Node",function(){ }) ...
append添加元素后点击事件失效
weixin_42132776的博客
07-12 1697
今天发现使用append方法添加的标签，无法触发点击事件。 失效原因：append中的节点是在整个文档加载完之后开始添加，页面不会为append的元素初始化添加点击事件，故使用这种方式动态添加的节点中的click事件没有生效。 解决方法：事件委托方式解决，将指定的事件绑定在document上，只要append元素符合指定的元素，就会绑定此事件 。 $(document).on("click","指...
对于js使用append追加的节点无法添加事件的解决方法
qq_21743293的博客
10-13 9221
有的时候我们为了体验性和灵活性，会使用js或者jQuery异步获取数据使用append方法追加元素，但是相对以前静态页面写的事件在新追加的元素上面不管用，就算在新追加的标签里面直接添加onclick事件也不起效果for(var i=0;i<=p_arr.length-1;i++) { province_html += ''+p_arr[i]['area_n
js append()后的元素失去事件解决方法1
weixin_42298679的博客
05-16 720
简单解决了动态append添加后失去事件的解决方法。
解决jQuery使用append添加的元素事件无效的问题
10-18
总的来说，解决jQuery `append`添加元素的事件无效问题，关键在于使用`on`方法代替`click`等直接的事件绑定，并将事件处理器绑定到一个固定的、已存在的父元素上，以便处理动态生成的子元素的事件。这种方法不仅解决...
JS中append字符串包含onclick无效传递参数失败的解决方案
10-20
在JavaScript中，我们经常需要通过`append`方法动态地向HTML元素中添加内容，特别是当涉及到事件处理（如`onclick`）时。然而，当尝试将`onclick`事件与动态生成的参数一起使用时，可能会遇到一些问题。本文将深入...
jquery动态添加元素事件失效问题解决方法
10-25
在示例中，解决动态添加元素事件失效的问题，我们可以将`.x .y`的点击事件绑定改为： ```javascript $(".y").on('click', '.x', function() { // 在这里编写事件处理代码 }); ``` 这段代码会监听`.y`类的所有元素...
append追加的html片段，添加点击事件没有反应，解决！
weixin_43942765的博客
06-25 887
对于追加的元素来说，属于未来展现的内容，我们此时不能使用一般点击事情处理，需要用未来事件绑定。 //绑定未来元素 $("body").delegate("#vehicleNumber","click", function(){ console.log(1234) }); 参考地址https://www.cnblogs.com/yangyuke1994/p/10177488.html ......
js在append的时候，onclick事件无效
qwer1154928613的博客
07-17 793
下面是我js中的标签代码: html+="<td><a href='javascript:void(0);'οnclick='reInvoice("+json.selectPyPay[i].payNo+")' class='btn btn-small'>点击</a></td>"; 当点击reInvoice的时候，点击事件无效 解决方法： 在方法内要传的值前后加上" html+="<td><a href='javascript:void
处理用append添加的元素用onclick绑定无效的事件
qq_41720578的博客
03-17 570
问题是：通过jQuery append（或者before、after，一样）新添加进网页的元素，常用的事件不能触发，比如：append了id 为 abc 的元素，那么 $(#abc).click(function(){})是没有效果的。 网上说要用live()函数，亲测无效，应该是jQuery的版本问题，反正到目前为止是不能用了； 解决方法：用on函数，要注意格式(楼主搞了半天，因为格式不对，哎，不说了…都是泪) 正确格式： $("outerSelector").on('eventType','
关于js append添加元素失效的解决方案
lanjinghexuan的博客
08-02 2168
本篇文章支支持$(this)获取数据，不支持$(this)删除自身。 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, mini
页面动态追加代码点击事件无效解决
青年小七
09-13 799
如果你的元素是用click事件append进来的 那你的功能函数必须放在这个click事件里面。 比如：$(".clickMeToAppendElement").click(function() { $(".toBeAppend").append("<li><span><i class=\"icon J_classtree\">这是元素内容</i>"); $(".J_classtr
关于js动态加载html元素，html中绑定的click事件不生效的解决办法
卫可冬的博客
12-23 4630
出现这种情况，其实是不清楚js事件委托的原理，就是指未来还不清楚会创建多少个节点,所以暂时没办法直接给他们注册事件。 因为javascript在dom载入之前，就已经把js加载了。 比如： js动态加载如下标签： <button id="query">查询</button> js中的绑定事件如下： $("#query").click(function () { ...
解决前端 js 中使用 append 动态追加元素标签后，事件和css样式异常问题
热门推荐
_修铁路的、的博客
09-18 1万+
场景： 我们在日常开发过程中，不可避免的会在前端 js 中使用 append 动态的追加元素标签，但新追加的元素标签，不会响应追加前添加的事件和 css 样式信息，今天遇到这个问题，查询总结了一下解决办法。 解决办法： 首先，解决下使用 append 动态追加元素后，不会响应原有事件： 根据百度里面大佬帖子可知: append中的节点是在整个文...
JS append后获得的id、class 无法通过获取节点添加点击事件
weixin_44394502的博客
04-03 1241
原因：append中的节点是在整个文档加载后才添加的，页面并不会为未来的元素初始化添加点击事件，所以使用这种方式动态添加的节点中的点击事件不会生效。根据共同的父级div是在HTML结构中的，所以将循环获得的单击事件代理给div，通过单击获得的class名来判断点击的是哪一个对象，再进行具体操作。解决方法： 事件代理。
关于HTML5 JS中append生成标签后无法触发click点击事件【2019-09-20】
应钟之月
09-20 546
$.ajax({ type: "get", url: localhostPath + "/decalartionapi/projectDirectoryList", data: "", dataType: "json", success: function (result) {...
获取js中动态append某标签的点击事件
qq_38337245的博客
08-04 4083
1问题：js的append动态添加节点，添加后节点中的点击点击时无效2.比如在success中 $(".show").append("&lt;a href=""&gt;单击我下载&lt;/a&gt;"); $(".show a").click(function(){     alert(33333); }); //这里的单击无效 没有打出33333，是因为append中的节点是在整个文档加载后才添
formdata的append、set无效
最新发布
06-19
<think>首先，用户的问题是关于FormData的append和set方法失效的问题。用户提到："我想解决formdata的append和set方法无效的问题"，并询问原因及解决方法。我需要在回答中引用相关的段落。用户提供了几个引用：-引用[1]:展示了使用FormData上传数据的AJAX代码。-引用[2]:解释了FormData的创建和基本用法，包括append、get、set方法。-引用[3]:提到使用has方法检查字段是否存在，并讨论了append更改值的问题。-引用[4]:描述了在iOS11下FormData上传失败的问题。-引用[5]:讨论了tinymce插件中的上传问题。用户的问题焦点是append和set方法无效，所以我应该重点参考引用[3]，因为它直接提到了"append更改值不生效问题"。回答结构需要清晰，帮助用户逐步解决问题。步骤包括：1.**解释问题原因**：为什么append和set方法可能失效。2.**提供解决方法**：如何修复或避免这个问题。3.**给出示例代码**：展示正确的用法。4.**生成相关问题**：作为系统级指令的一部分，我需要生成相关问题。原因可能包括：-**浏览器兼容性问题**：如引用[4]中提到的iOS11问题。-**FormData对象的不可变性**：FormData对象在创建后可能不支持直接修改，或者方法在某些上下文中无效。-**错误用法**：比如在循环中错误使用，或参数不正确。从引用[3]："关于FormData使用append更改值不生效问题"，它提到使用has方法检查字段存在，但没有直接解决append无效的原因。引用[4]指出在iOS11下FormData有问题。解决方法：-**检查浏览器兼容性**：确保使用现代浏览器或polyfill。-**使用正确的API**：确认append和set的用法。-**替代方法**：如果append无效，尝试其他方式，比如创建新FormData对象。-**调试技巧**：使用console.log或has方法验证。示例代码：基于引用[2]，展示正确的append和set用法。生成相关问题：系统指令要求生成相关问题，例如：1.FormData在哪些浏览器中有兼容性问题？2.如何调试FormData上传问题？3.FormData的其他常见问题及解决方案？回答语言：使用中文。最后，在引用段落末尾添加引用标识，如[^1]。结构化回答：-**引言**：简要介绍问题。-**原因分析**：解释为什么append和set可能失效。-**解决方法**：提供具体步骤。-**示例代码**：展示正确用法。-**相关问题**：生成几个相关问题。</think>### FormData append和set方法失效的原因及解决方法 FormData 是 JavaScript 中用于处理表单数据（特别是文件上传）的 API。当 `append()` 或 `set()` 方法无效时，通常是由于浏览器兼容性问题、API 使用错误或特定上下文限制导致的。下面我将逐步分析原因并提供解决方法，确保回答真实可靠（基于您提供的引用和常见开发实践）。 #### 原因分析 1. **浏览器兼容性问题（常见于旧版或移动端浏览器）**： - iOS 11 及以下版本对 FormData 的支持有缺陷，可能导致 `append()` 或 `set()` 无法正确添加数据（如引用[4]所述）。这是因为 WebKit 内核的旧版本存在 bug。 - 其他浏览器（如旧版 Android 或 IE）也可能因规范实现不完整导致方法失效[^4]。 2. **FormData 对象的不可变性或上下文错误**： - `append()` 和 `set()` 方法不会修改原始 FormData 对象，而是返回一个新对象（引用[2]和[3]）。如果未重新赋值，操作看似无效。 - 在异步操作（如 AJAX 上传）中，如果 FormData 对象在事件监听器外创建或使用不当，可能导致方法调用无效[^1]。 3. **参数错误或数据类型不匹配**： - `append(key, value)` 要求 `value` 是字符串、Blob 或 File 对象。如果传入不支持的类型（如普通对象），方法会静默失败（引用[2]）。 - `set(key, value)` 用于覆盖已存在的键值对，但如果键不存在，它不会自动添加，导致无效（引用[3]）。 4. **框架或插件冲突**： - 在 Vue、React 等框架中，或使用插件（如 tinymce），组件生命周期可能干扰 FormData 操作（引用[5]）。 #### 解决方法 按照以下步骤排查和修复问题： 1. **检查浏览器兼容性并添加 Polyfill**： - 测试目标浏览器：使用开发者工具（如 Chrome DevTools）或在线服务（BrowserStack）验证兼容性。 - 添加 Polyfill：在旧浏览器中引入 `formdata-polyfill` 库。 ```html <!-- 在 HTML 中引入 Polyfill --> <script src="https://cdn.jsdelivr.net/npm/formdata-polyfill@3.0.20/formdata.min.js"></script> ``` - 针对 iOS 11：确保使用最新 Safari 或提示用户升级（引用[4]）[^4]。 2. **正确使用 API 并验证数据**： - **创建和重新赋值 FormData**：每次操作后重新赋值对象。 ```javascript let formData = new FormData(); formData = formData.append('name', 'lili'); // 重新赋值 console.log(formData.get('name')); // 输出 'lili' ``` - **使用 `has()` 方法验证**：确保键值存在后再操作（引用[3]）。 ```javascript if (!formData.has('file')) { formData.append('file', new File([blob], 'filename.jpg')); } ``` - **避免数据类型错误**：确保值类型正确。 ```javascript // 错误：直接传入元素对象 // formData.append('file', element); // 正确：转换为 File 或 Blob const file = new File([element], element.name, { type: 'image/jpeg' }); formData.append('file', file); ``` 3. **在异步上下文中安全使用**： - 在 AJAX 请求前构建 FormData，避免在事件处理器外操作（引用[1]）。 ```javascript document.getElementById('uploadBtn').addEventListener('click', () => { const formData = new FormData(); formData.append('file', fileInput.files[0]); // AJAX 请求 $.ajax({ url: '/upload', type: 'POST', data: formData, processData: false, contentType: false, success: (response) => console.log(response) }); }); ``` 4. **调试和框架集成技巧**： - **日志输出**：使用 `console.log` 检查 FormData 内容。 ```javascript formData.forEach((value, key) => console.log(key, value)); ``` - **框架中处理**：在 Vue/React 中，确保在组件生命周期内操作（如 `mounted` 钩子）（引用[5]）。 ```javascript // Vue 示例 methods: { handleUpload() { const formData = new FormData(); formData.append('content', this.content); // 调用 API } } ``` #### 示例代码：完整工作流程 基于引用[1]和[2]，以下是一个兼容性良好的实现： ```javascript // 创建 FormData 并添加数据 let formData = new FormData(); formData = formData.append('username', 'user123'); // 重新赋值 formData = formData.set('email', 'user@example.com'); // 覆盖或添加 // 验证并上传 if (formData.has('username')) { fetch('/submit', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); } ``` #### 注意事项 - **测试环境**：在开发中优先测试移动端（iOS/Android），使用真实设备模拟。 - **性能**：多次 `append()` 可能影响性能，建议批量操作。 - 如果问题持续，检查服务器端是否支持 `multipart/form-data` 类型[^1]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值