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 ...
随机推荐
- 制作 ESXI6.7 U盘安装盘并用其安装
工具 UltraISO :软碟通官网下载 EXSI镜像文件:http://ddl6.digiboy.ir/vmware/6.7/VMware-VMvisor-Installer-6.7.0-816 ...
- PHP操作文件常用函数
[获取文件信息的函数] basename($path[,扩展名]) 返回文件路径中去掉路径后的文件名称."/root/a.txt"输出a.txt;带上.txt输出a. dirnam ...
- 关于Mysql中GROUP_CONCAT函数返回值长度的坑
1.GROUP_CONCAT函数: 功能:将group by产生的同一个分组中的值连接起来,返回一个字符串结果. 语法:group_concat( [distinct] 要连接的字段 [order b ...
- ubuntu 12.04 以固定 IP 地址连接网络并配置DNS
sudo vim /etc/network/interfaces auto eth0 iface eth0 inet static address 192.168.2.155 netmask 255. ...
- 002-02-RestTemplate-初始化调用流程
一.简述 调用 RestTemplate 的默认构造函数,RestTemplate 对象在底层通过使用 java.net 包下的实现创建 HTTP 请求,可以通过使用 ClientHttpReques ...
- zip格式压缩文件辅助类(ZipHelper)
/// <summary> /// 压缩解压文件 /// </summary> public class ZipHelper { /// <summary> /// ...
- python 对xls写入信息
只能新创建xls # coding=utf-8import xlwt writebook = xlwt.Workbook() #打开excel test= writebo ...
- python学习：python的常用功能示例2
1. python 写入txt with open("douban.txt","w") as f: f.write("这是个测试!") fi ...
- 简介Python设计模式中的代理模式与模板方法模式编程
简介Python设计模式中的代理模式与模板方法模式编程 这篇文章主要介绍了Python设计模式中的代理模式与模板方法模式编程,文中举了两个简单的代码片段来说明,需要的朋友可以参考下 代理模式 Prox ...
- 将Python的Django框架与认证系统整合的方法
将Python的Django框架与认证系统整合的方法 这篇文章主要介绍了将Python的Django框架与认证系统整合的方法,包括指定认证后台和编写认证后台等内容,需要的朋友可以参考下 将Django ...