zoukankan      html  css  js  c++  java
  • 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)匹配,就触发事件,否则不触发。

  • 相关阅读:
    About
    Git
    SQL
    fiddler
    Windows下----nvm的安装操作
    vs-code 的常用插件
    npm安装依赖时-S和-D的作用以及区别
    Node.js的安装以及包的安装使用
    JavaScript-----设计模式
    JavaScript-----JS的深拷贝和浅拷贝
  • 原文地址:https://www.cnblogs.com/qczy/p/12855992.html
Copyright © 2011-2022 走看看