HTML中关于动态创建的标签无法绑定js事件的解决方法：.on()方法的 [.selector]
在前端页面的时候，会经常遇到用JavaScript动态创建出来的Button按钮或其他标签无法使用点击事件的问题。如下代码，使用jquery在body中动态创建一个class为demo的Button按钮，当点击这个按钮时无法触发点击事件。
<script>
$(function(){
$("body").html("<button class='demo'>按钮</button>");
$(".demo").click(function(){
alert("弹窗");
});
});
</script>
<body>
</body>
将以上代码中的 $(“.demo”).click(function(){………}); 修改为 $(document).on(“click”,”.demo”,function(){………})即可：
<script>
$(function(){
$("body").html("<button class='demo'>按钮</button>");
$(document).on("click",".demo",function(){
alert("弹窗");
});
});
</script> <body> </body>
此时事件冒泡到document对象上，当检测事件的target，如果与传入的选择符（这里是selector）匹配，就触发事件，否则不触发。
.on()方法的 [.selector]用法详情见：https://www.runoob.com/jquery/event-on.html
HTML中关于动态创建的标签无法绑定js事件的解决方法：.on()方法的 [.selector]的更多相关文章
- JavaScript动态创建script标签并执行js代码
<script> //创建一个script标签 function loadScriptString(code) { var script = document.createElement( ...
- 超链接标签绑定JS事件&&不加"javascript:;"导致的杯具
很久以来,在写Html和JS时,经常会给超链接<a>标签,绑定JS事件. 我们经常看到这样的写法,<a href="javascript:;" onclick=& ...
- javascript动态创建script标签,加载完成后调用回调
代码如下: var head = document.getElementsByTagName('head')[0]; var script = document.createElement('scri ...
- jquery 动态创建的元素，绑定事件无效之解决方法
今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- Java中如何动态创建接口的实现
有很多应用场景,用到了接口动态实现,下面举几个典型的应用: 1.mybatis / jpa 等orm框架,可以在接口上加注解进行开发,不需要编写实现类,运行时动态产生实现. 2.dubbo等分布式服务 ...
- C# 中的动态创建技术
[转载]原文出处 http://blog.csdn.net/baiyun789/article/details/6156694 第一部分 WinForm控件在窗体中动态居中创建.删除控件及对其赋值 ...
- Python 中使用动态创建类属性的机制实现接口之后的依赖
我们在自动化测试中经常会需要关联用例处理,需要动态类属性: 推荐使用第二种方法: 创建:setattr() 获取:getattr() 两种,如何创建 类属性 loan_id # 第一种,创建 # 类名 ...
- ThinkPHP框架下，给jq动态添加的标签添加点击事件移除标签
jq移除标签主要就是$("#要移除的id").remove();不再赘述,这里要提醒的是jq中动态添加标签后怎样添加点击事件.一般的jq添加点击事件是用这种方法$("#i ...
随机推荐
- 关于Mysql-unknow-column-in-where-clause
写在前边: 已经很久不更新了啊,整个2月份几乎没有遇到什么新鲜事.直到昨天我又犯了一次傻,貌似只有我犯傻的时候才有材料可以跟大家分享- 问题表现: mysql 报错: unknow column 's ...
- PAT 甲级 1039 Course List for Student (25 分)（字符串哈希,优先队列,没想到是哈希）*
1039 Course List for Student (25 分) Zhejiang University has 40000 students and provides 2500 cours ...
- （一）java面试易忘题目精选（1）
1. int和Integer有什么区别? 答:Java是一个近乎纯洁的面向对象编程语言,但是为了编程的方便还是引入了基本数据类型,但是为了能够将这些基本数据类型当成对象操作,Java为每一个基本数据类 ...
- （十三）static关键字
--摘自孤傲苍狼博客 一.static关键字
- 从成员函数指针生成可调用对象：function<>、mem_fn()和bind()
我们知道,普通函数指针是一个可调用对象,但是成员函数指针不是可调用对象.因此,如果我们想在一个保存string的vector中找到第一个空string,不能这样写: vector<string& ...
- 文件被sourceTree忽略了怎么办
- sehll变量比较
1.比较符号解释 $# 表示提供到shell脚本或者函数的参数总数: $1 表示第一个参数. -ne 表示 不等于 $?是shell变量,表示"最后一次执行命令"的退出状态.0为成 ...
- Docker 容器的运行(八)
目录 一.运行容器 1.运行第一个容器 2.让容器长期运行 二.进入容器 1.attach 2.exec 3.attach VS exec 4.容器内部都在干些什么 三.停止/启动/重启容器 四.暂停 ...
- 为什么每次登录要手动 source /etc/profile ...
由于执行顺序如下,故追个查看以下文件,看看是不是 JAVA_HOME, PATH 等环境变量在后面的文件中被重写覆盖了. 1. /etc/profile2. /etc/environment3. ~/ ...
- Spring 使用单选按钮
模型层需要提供数据选项,设置错误信息 关键代码 @NotNull(message = "请选择性别") private String gender; 控制器层需要在显示视图前,通过 ...