防止多次引入js文件导致的重复注册点击事件

前端代码中的js文件如果是动态引入的或者是某个事件操作进行注册的,那么重复的引入js文件或者多次触发注册事件会导致事件多次进行注册,造成不必要的麻烦,所以需要在每次注册之前将先前的事件进行取消,下面以按钮的注册点击事件为例进行说明:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css_com/reset.css">
    <style>

    </style>
    <!--网络cdn提供jquery,自己下载好引用一样-->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<input type="button" value="按钮1" id="btn">
<input type="button" value="按钮2" id="btn2">

<script>
//    为了防止多次注册事件,所以在每次注册之前需要提前将之前注册的点击事件去掉
    $(function(){
        $("#btn").click(function(){
            $("body").off("click","#btn2").on("click","#btn2",function(){
                alert("注册成功");
            });
        });
    });
</script>
</body>
</html>

  

原文地址:https://www.cnblogs.com/SpringAndMoon/p/12105824.html

时间: 2024-10-12 19:30:36

防止多次引入js文件导致的重复注册点击事件的相关文章

为什么很多网页里不直接用script标签引入JS文件,而是通过函数新建script,然后添加属性,再来引入呢?

最近在做毕业的项目,发现很多网页里都是通过构建函数的方式来引入JS文件,代码如下: function loadJScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://***"; document.body.appendChild(script); } 在我看来,<scrip

动态引入Js文件

var src = "/Scripts/Test.js"; $("<script type = 'text/javascript' src='" + src + "'><\/script>").appendTo("head"); //动态加载 TestAlert123123(); //调用Test.js中的函数 二.顺序添加(QQ) <img src="1.jpg" width

jsp引入js文件

转自:http://blog.csdn.net/ppzhangj/article/details/7859628 1)引入的js文件出错, 检查方法:将Js的内容写在当前的页面的<script> </script>之间,看是否能够正常运行,如果不能,请核查代码 2) 如果引入的代码在当前页面中能够正常运行,但当引入时不能正常运行,则有两种可能    A:引入Js的路径有问题    B:引入的Js的编码格式与当前页面不匹配: 3)引入Js的路径问题    js的引入不外乎两种,相对路

jsp文件引入js文件的方式(项目部署于web容器中)

在页面中引入javascript文件的方式是多种多样的,本文介绍一种. 1.在eclipse中新建一个web项目(project3),目录结构如下: 二:在jsp页面的最开始,获取项目的根路径. <%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort

js文件最后加载(在window.load事件发生后再加载js文件),用于解决因jQuery等js库导致网页加载慢的问题

需引入文件:lazyload-min.js <script src="JS/lazyload-min.js" type="text/javascript"></script> 插入代码: function loadscript() { LazyLoad.loadOnce([ 'JS/touch.js', 'http://libs.baidu.com/jquery/1.2.3/jquery.min.js' ], loadComplete); }

自己编写jQuery动态引入js文件插件 (jquery.import.dynamic.script)

这个插件主要是结合jquery或者xhr异步请求来使用的,它可以把已经引入过的js文件记录在浏览器内存中,当下次再引入相同的文件就忽略该文件的引入. 当你用$.load("dir/my-page.jsp"); 或xhr.request("server/to-my-page");等异步请求加载html页面的时候,在页面中导入js文件用本插件进行引入的话, 那么其他请求的页面中也导入了和前面页面相当的js文件的情况下,那这些js文件就不需要重新引入.插件会自动忽略之前已

JSP中引入js文件

1. 引入的js文件代码执行出错        排查方法:将引入的js文件中的代码直接放到jsp中<script></script>标签内,使用浏览器访问,如果出错,则为js 代码存在问题 2. 如果步骤一中未出错,但引入时报错,则有两种可能 引入Js的指令有错误 引入的Js的编码格式与当前页面不匹配 1) 引入Js的指令有错误     |-source     |    |     |    ---js     |      |     |      ---base.js    

引入js文件

1,<script type="text/javascript" src="<%=request.getContextPath()%>/jslib/my.js"></script> 2,<script type="text/javascript" src="jslib/my.js"></script> 注:jslib为存放js文件的文件夹,与WEB-INF处于同一层次

Cakephp中使用JavaScriptHelper来引入js文件

页面的head部分的内容在Cakephp中主要是有htmlhelper来进行控制的,而js部分则是由JavaScripthelper来进行控制的,在controller里面设置好:var $helpers = array(’Html’,'Javascript’);就可以在ctp文件中使用JavaScripthelper对象:$javascript了.具体见正文. 前提是js文件都放在了 webroot/js  目录下面了,下面是范例. 1.$javascript->link($JsName,0)