在前端页面的时候，会经常遇到用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. idea备忘

    1.idea 最近打开的文件个数 File->Settings->Editor->General->Editor Tabs->Tab Closing Policy-> ...

  2. 通过adb操作安卓亮屏、设置背光亮度、解锁、打开app

    亮屏 adb shell inputkeyevent 26 keyevent 26表示点击power Android adb 点亮和关闭屏幕的命令 # kernel休眠 echo mem > / ...

  3. git 初次提交

    前提:已经关联了ssh到本地,不用再输入用户名和密码 知道仓库地址:https://xxx.xxx.com/aiotcloud/yihao01-node-js.git 第一步:进入本地文件夹执行 gi ...

  4. 让群辉支持DTS音轨

    让群晖Video Station支持DTS音轨的方法原因:因版权问题,群晖Video Station默认不支持DTS音轨,因此默认不能播放使用DTS音轨的影片. 网上搜到好多解决办法,通常是让添加源h ...

  5. 26Flutter 日期 和时间戳/格式化日期库/flutter异步/ 官方自带日期组件showDatePicker、时间组件showTimePicker以及国际化

    /* 一.Flutter日期和时间戳 日期转换成时间戳 var now=newDateTime.now(); print(now.millisecondsSinceEpoch); //单位毫秒,13位 ...

  6. mysql数据format格式化错误

    DROP TABLE IF EXISTS `api_billing`; CREATE TABLE `api_billing` ( `id` ) NOT NULL AUTO_INCREMENT, `se ...

  7. Python - Django - 添加作者

    在 book_list.html 的页面下方加上 “添加作者” 的链接 <!DOCTYPE html> <html lang="en"> <head& ...

  8. VCL组件之TPanel

    TPanel位于Standard组件面板上,也是常用的一种容器控件.面板的一个优点就是放在面板上的组件称为面板的一部分,因此它们与面板一起移动.这在设计阶段很有用. Panel组件的大部分功能在于其A ...

  9. laravel服务提供者类说明

    IoC 是将内部设计的类交给系统去控制,但是有些类在初始化的时候,需要制定特定的参数,或者当你需要将实现类绑定到某个接口,这时候就必须对这些依赖进行配置,系统才能正确解析并引用. register 而 ...

  10. Cognos Framework操作记录

    备注:这是我单位内部的Cognos Framework配置记录,里面涉及的名字等信息在其他使用环境需要进行相应修改. Cognos数据包配置 打开CYFTest项目, 右键点击andwdb的物理视图 ...