$.getscript adding duplicate event listeners

Question

I know whats wrong in code but i am not able to understand why jquery is doing that ,so let me explain my problem with following code

 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();
     });
  });

Now every time i click btnTestMain, it adds event listener to btnTest1 and btnTest2 , so if i click btnTestMain 5 times there will be 5 click event listeners on btnTest1 and 5 on btnTest2. Can anyone explain why this is happening? I know how to resolve the issue but i am not able to understand reason for duplicate event listeners.

You have a script that adds event listeners. You run this script each time you press the button. If you press the button 5 times the script will run 5 times, adding event listeners each time. Why did you think it would not create duplicate event listeners? — Lennholm
– Lennholm, Commented Aug 29, 2018 at 1:47
Yes it is same as you writing jQuery("#btnTest1").click(function (event) { console.log("button1 clicked"); });, 5 times — codisfy
– codisfy, Commented Aug 29, 2018 at 1:55
And for further clarification $(document).ready(function () { gets executed everytime your button loads the script. — codisfy
– codisfy, Commented Aug 29, 2018 at 1:56

TheVirtuoid · Accepted Answer · 2018-08-29 01:48:32Z

1

Each time 'test.js' is loaded, jQuery adds the 'click' listener to the two button elements. The key here is that it will not remove any old ones, and that is why you are getting the duplication (which, in reality, isn't a duplication).

answered Aug 29, 2018 at 1:48

TheVirtuoid

1006 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sandeep Over a year ago

Ok ,that is bit strange as i was under assumption that it should remove old event listeners but probably that is probably intended functionality or wrongful use of getScript by me.

TheVirtuoid Over a year ago

You are correct, it's intended functionality. We used to use the format $('selector').off('click').on('click', function() {...}); to avoid that problem.

Collectives™ on Stack Overflow

$.getscript adding duplicate event listeners

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related