时间戳

首页 > 解决方案 > $.getscript 添加重复的事件监听器

javascript - $.getscript 添加重复的事件监听器

问题描述

我知道代码有什么问题，但我不明白为什么 jquery 会这样做，所以让我用下面的代码解释我的问题

 test.html
 #############
<!doctype html>
<html class="no-js" lang="en">
<head>
<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
</head>
<body>
<div class="wrapper wrapper-layout"> <!-- Header with navigation - Start -->
<button id="btnTestMain" type="button" value="Adjust" class="btn btn- 
 red1">Button test MAIN</button>
 <div id="injectHeaderMainHTML"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
    $("#injectHeaderMainHTML").load("/ui-test/test_page.html", 'f' + (Math.random() * 1000000));
       $.getScript("js/test1.js", function() {  
    });
    });
 </script>
 </body>
 </html>


 ###test1.js######

  $(document).ready(function() {

     $("#btnTestMain").click(function (event) {
          $.getScript("/ui-test/js/test.js").done(function() {
                            console.log("script loaded");
                        }).fail(function() {
                            console.log('problem in loading test js');
                        });
    });

  }); // Document Ready Closed

 test_Page.html
 ###############################
   <button id="btnTest1" type="button"  class="btn btn-red1">Button test 
   1</button>
   <button id="btnTest2" type="button"  class="btn btn-red1">Button test 2</button>  


  test.js
  ###############
     function testFunction()
    {
       console.log("test function called");
    }

  $(document).ready(function () {
     $("#btnTest1").click(function (event) {
        console.log("button1 clicked");
     });

     $("#btnTest2").click(function (event) {
         testFunction();
     });
  });

现在每次单击 btnTestMain 时，它都会将事件侦听器添加到 btnTest1 和 btnTest2 ，因此如果我单击 btnTestMain 5 次，btnTest1 上将有 5 个单击事件侦听器，btnTest2 上将有 5 个单击事件侦听器。谁能解释为什么会这样？我知道如何解决这个问题，但我无法理解重复事件监听器的原因。

标签： javascriptjquery

解决方案

每次加载“test.js”时，jQuery 都会将“click”侦听器添加到两个按钮元素。这里的关键是它不会删除任何旧的，这就是你得到重复的原因（实际上，这不是重复）。

推荐阅读