JS动态append之后点击事件无效
今天做项目用了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结构中的,所以将两个单击事件代理给content,通过单击获得的class名来判断点击的是哪一个对象,再进行具体操作
$('#content').on('click',function (e) {
var target=e.target||e.srcElement;//获取当前点击的对象
var cls=target.className;//获取当前点击对象的class名
if(cls==='addcart'){//如果点击的是加入购物车
console.log('addcart')
}else if (cls==='buy') {//如果点击的是立即购买
console.log('buy')
}
});
JS动态append之后点击事件无效的更多相关文章
- jQuery绑定动态元素的点击事件无效
之前就一直受这个问题的困扰,在写ajax加载数据的时候发现,后面追加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢?那么,我们通过下面的示例简单说明. 示例如下: ...
- jQuery on()方法绑定动态元素的点击事件无效
之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...
- 动态生成的DOM做点击事件无效
有时候我们的标签都是从后台获取的数据,然后利用JS添加到页面上,当我们写生成的标签的点击事件(click)时没有效果. 例如: <section> 测试动态生成的DOM点击事件 <b ...
- ListView的item中有button和checkbox,listview的点击事件无效
ListView的item中有button和checkbox,listview的点击事件无效,解决办法: 在item布局文件中的根控件中添加属性设置: android:descendantFocusa ...
- IOS - Safari中click点击事件无效
做web移动端页面时,安卓端一点问题也没,发现在ios真机上点击事件无效,发现Safari下只有默认可点击的元素才click点击事件,像span div等元素是不具有点击事件的. 解决问题四种方式: ...
- electron 点击事件无效
用CSS的 -webkit-app-region: drag;设置窗口可以移动后,点击事件无效 解决办法暂时不知道, 给点击的按钮加 -webkit-app-region: no-drag; 就可以点 ...
- Android 7.0 TextView点击事件无效修复方案
public class PostTextView extends TextView { private Handler handler = new Handler(Looper.getMainLoo ...
- JQuery 动态加载 HTML 元素时绑定点击事件无效问题
问题描述 假设项目中有一个列表页面,如下: 当点击列表一行数据可以显示详情页面,而详情页面的数据是根据当前行的数据作为参数,通过 ajax 请求到后台返回的数据,再根据返回的结果动态生成 html 页 ...
- jquery datables ajax分页后的点击事件无效是怎么回事
异步请求数据后,动态向table中追加行,行点击事件失效 动态加入到DOM中的对象无法继承原有的事件,所以无效,举例: // $.ajax... ajax部分省略 var tr = "&qu ...
随机推荐
- java和js互调 webview
public class JavaAndJSActivity extends Activity implements View.OnClickListener { private EditText e ...
- B. Two Buttons
这是Codeforces Round #295 (Div. 2) 的B 题,题意为: 给出n, m, 有两种操作,n 减一 和 n 乘以 2,问最少要多少次操作才能把n 变成 m. Sample te ...
- Java基础知识整理之static修饰属性
static 关键字,我们在开发用的还是比较多的.在<Java编程思想>有下面一段话 static 方法就是没有 this 的方法.在 static 方法内部不能调用非静态方法,反过来是可 ...
- mvc Bundling 学习记录
因为现在的项目JS引用很多,无意中看到了MVC4的Bundling,开始的时候感觉很不错,将所有的CSS,js文件压缩成一个文件处理,画面调用也很简单 于是,花了一个下午的时候研究了一下,并且通过各种 ...
- POJ2104 K-th Number —— 区间第k小 整体二分
题目链接:https://vjudge.net/problem/POJ-2104 K-th Number Time Limit: 20000MS Memory Limit: 65536K Tota ...
- 算法(Algorithms)第4版 练习 链表类 1.3.19~1.3.29
package com.qiusongde.linkedlist; import java.util.Iterator; import java.util.NoSuchElementException ...
- js动态插入标签代码(insertAdjacentHTML)
做网页时通过ajax请求获取到数据后,有的需要把数据拼接到带有各种标签的字符串中,拼接完字符串就需要把字符串动态添加到网页上的某个位置,举个
- javascript类的简单定义
在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对象(又称"实例")共有的属性和方法. Javascript语言不支持"类",但是可 ...
- SENet(Squeeze-and-Excitation Networks)算法笔记---通过学习的方式来自动获取到每个特征通道的重要程度,然后依照这个重要程度去提升有用的特征并抑制对当前任务用处不大的特征
Momenta详解ImageNet 2017夺冠架构SENet 转自机器之心专栏 作者:胡杰 本届 CVPR 2017大会上出现了很多值得关注的精彩论文,国内自动驾驶创业公司 Momenta 联合机器 ...
- TestDescription文档描述测试过程
测试描述文档是用xml语言描述测试过程的文档,一个测试过程包括测试信号建立,UUT引脚确定,建立连接关系,数据测量,断开连接关系,复位测试信号等步骤. 下图用标准的ATML语言描述了接通直流电源并测量 ...