Javascript $.getscript添加重复的事件侦听器_Javascript_Jquery

Javascript $.getscript添加重复的事件侦听器

javascript jquery

Javascript $.getscript添加重复的事件侦听器,javascript,jquery,Javascript,Jquery,我知道代码中有什么错误，但我无法理解为什么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> <bo

我知道代码中有什么错误，但我无法理解为什么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();
     });
  });

test.html
#############
按钮测试干线
$（文档）.ready（函数（）{
$（“#injectheadermaintml”）.load（“/ui test/test_page.html”，'f'+（Math.random（）*1000000））；
$.getScript（“js/test1.js”，function（）{
});
});
###test1.js######
$（文档）.ready（函数（）{
$（“#btnTestMain”）。单击（函数（事件）{
$.getScript（“/ui test/js/test.js”）.done（函数（）{
log（“脚本加载”）；
}).fail（函数（）{
log（“加载测试js时出现问题”）；
});
});
}); // 文件准备就绪关闭
test_Page.html
###############################
按钮测试
1.
按钮测试2
test.js
###############
函数testFunction（）
{
log（“调用了测试函数”）；
}
$（文档）.ready（函数（）{
$（“#btnTest1”）。单击（函数（事件）{
console.log（“单击按钮1”）；
});
$（“#btnTest2”）。单击（函数（事件）{
testFunction（）；
});
});

现在，每次我单击btnTestMain，它都会将事件侦听器添加到btnTest1和btnTest2，因此如果我单击btnTestMain 5次，btnTest1和btnTest2上将分别有5个和5个单击事件侦听器。

有人能解释为什么会这样吗？我知道如何解决该问题，但我无法理解重复事件侦听器的原因。

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

您有一个添加事件侦听器的脚本。每次按下按钮时都会运行此脚本。如果按5次按钮，脚本将运行5次，每次添加事件侦听器。为什么您认为它不会创建重复的事件侦听器？是的，它与您编写的

jQuery（#btnTest1”）相同，5次，用于进一步澄清$（文档）。就绪（函数（）{
会在每次按钮加载脚本时执行。好吧，这有点奇怪，因为我假设它应该删除旧的事件侦听器，但这可能是我有意使用的功能或错误使用getScript。您是对的，这是有意使用的功能。我们以前使用的格式是$（'selector'）。off（'click'）。on（'click'，function（）{…}）；以避免该问题。