在前端页面的时候，会经常遇到用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]的更多相关文章

  1. JavaScript动态创建script标签并执行js代码

    <script> //创建一个script标签 function loadScriptString(code) { var script = document.createElement( ...

  2. 超链接标签绑定JS事件&&不加"javascript:;"导致的杯具

    很久以来,在写Html和JS时,经常会给超链接<a>标签,绑定JS事件. 我们经常看到这样的写法,<a href="javascript:;" onclick=& ...

  3. javascript动态创建script标签,加载完成后调用回调

    代码如下: var head = document.getElementsByTagName('head')[0]; var script = document.createElement('scri ...

  4. jquery 动态创建的元素，绑定事件无效之解决方法

    今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...

  5. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  6. Java中如何动态创建接口的实现

    有很多应用场景,用到了接口动态实现,下面举几个典型的应用: 1.mybatis / jpa 等orm框架,可以在接口上加注解进行开发,不需要编写实现类,运行时动态产生实现. 2.dubbo等分布式服务 ...

  7. C# 中的动态创建技术

    [转载]原文出处  http://blog.csdn.net/baiyun789/article/details/6156694 第一部分 WinForm控件在窗体中动态居中创建.删除控件及对其赋值 ...

  8. Python 中使用动态创建类属性的机制实现接口之后的依赖

    我们在自动化测试中经常会需要关联用例处理,需要动态类属性: 推荐使用第二种方法: 创建:setattr() 获取:getattr() 两种,如何创建 类属性 loan_id # 第一种,创建 # 类名 ...

  9. ThinkPHP框架下，给jq动态添加的标签添加点击事件移除标签

    jq移除标签主要就是$("#要移除的id").remove();不再赘述,这里要提醒的是jq中动态添加标签后怎样添加点击事件.一般的jq添加点击事件是用这种方法$("#i ...

随机推荐

  1. 制作 ESXI6.7 U盘安装盘并用其安装

    工具 UltraISO   :软碟通官网下载 EXSI镜像文件:http://ddl6.digiboy.ir/vmware/6.7/VMware-VMvisor-Installer-6.7.0-816 ...

  2. Eclipse插件(导出UML图,打开文件资源管理器插件,静态代码分析工具PMD，在eclipse上安装插件)

    目录 能够导出UML图的Eclipse插件 打开文件资源管理器插件 Java静态代码分析工具PMD 如何在eclipse上安装插件 JProfiler性能分析工具 从更新站点安装EclEmma 能够导 ...

  3. Thingsboard学习之二安装Docker和Docker-Compose

    安装系统更新系统,参考<Thingsboard学习之一CentOS安装系统更新> 尝试更新系统 yum update 增加一个用户并设置密码,并将用户增加到管理员 # 添加用户(可选) s ...

  4. Cookie 概述

    一.属性介绍 Name Cookie的key Value Cookie的value Domain 可以访问此Cookie的域名 Path 可以访问此Cookie的页面路径 Expires/Max-Ag ...

  5. php7的扩展库安装方法

    转:https://www.cnblogs.com/to-be-rich/p/8001175.html 今天的知识点:1.php的再次编译不会对现有的php业务有影响,只有正式kill -USR2 p ...

  6. PyTorch Tutorials 3 Neural Networks

    %matplotlib inline Neural Networks 使用torch.nn包来构建神经网络. 上一讲已经讲过了autograd,nn包依赖autograd包来定义模型并求导. 一个nn ...

  7. Leetcode: Sum of Two Integers && Summary: Bit Manipulation

    Calculate the sum of two integers a and b, but you are not allowed to use the operator + and -. Exam ...

  8. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_15-认证接口开发-Redis配置

    4.2 Redis配置 4.2.1 安装Redis 1.安装Redis服务 下载Windows版本的redis:https://github.com/MicrosoftArchive/redis/ta ...

  9. MySQL中创建存储过程示例

    在这个示例中需要用到一张名为test_table的表,我们使用show create table test_table查看表的创建过程: CREATE TABLE `test_table` ( `id ...

  10. 使用sort,uniq去重并统计出现次数

    测试文档test 1 2 3 4 1 2 1 1 sort把相同的放在一起 [root@salt-test ~]# sort test 1 1 1 1 2 2 3 4 uniq -c统计出现的次数 [ ...