same script loading multiple times on click event javascript/jquery












1















$(document).click(function() {
$('.settings').click(function(){
alert();
});

});


I am loading this script on click event as I cannot load this on ready event. Now when I click on button with class settings first time, nothing happens as expected as the script is loaded after I click on button.



Second time, I click on this button, alert is shown one time (as expected).



But the unexpected behavior is, when I click for third time, alert is shown 2 times. When I click for 4th time, alert is shown 3 times and so on.



One possible reason that I can think of is, script was loading every time when I click.



What could be the issue? How can I prevent same piece of script from loading again and again?



Thanks!










share|improve this question























  • every time you click, you add another click handler to $('.settings') - perhaps you need the off jquery function

    – Bravo
    Nov 15 '18 at 10:24













  • how can I prevent this behavior? how can I add this only once?

    – Saqib Shahzad
    Nov 15 '18 at 10:26











  • perhaps you need the off jquery function

    – Bravo
    Nov 15 '18 at 10:27
















1















$(document).click(function() {
$('.settings').click(function(){
alert();
});

});


I am loading this script on click event as I cannot load this on ready event. Now when I click on button with class settings first time, nothing happens as expected as the script is loaded after I click on button.



Second time, I click on this button, alert is shown one time (as expected).



But the unexpected behavior is, when I click for third time, alert is shown 2 times. When I click for 4th time, alert is shown 3 times and so on.



One possible reason that I can think of is, script was loading every time when I click.



What could be the issue? How can I prevent same piece of script from loading again and again?



Thanks!










share|improve this question























  • every time you click, you add another click handler to $('.settings') - perhaps you need the off jquery function

    – Bravo
    Nov 15 '18 at 10:24













  • how can I prevent this behavior? how can I add this only once?

    – Saqib Shahzad
    Nov 15 '18 at 10:26











  • perhaps you need the off jquery function

    – Bravo
    Nov 15 '18 at 10:27














1












1








1








$(document).click(function() {
$('.settings').click(function(){
alert();
});

});


I am loading this script on click event as I cannot load this on ready event. Now when I click on button with class settings first time, nothing happens as expected as the script is loaded after I click on button.



Second time, I click on this button, alert is shown one time (as expected).



But the unexpected behavior is, when I click for third time, alert is shown 2 times. When I click for 4th time, alert is shown 3 times and so on.



One possible reason that I can think of is, script was loading every time when I click.



What could be the issue? How can I prevent same piece of script from loading again and again?



Thanks!










share|improve this question














$(document).click(function() {
$('.settings').click(function(){
alert();
});

});


I am loading this script on click event as I cannot load this on ready event. Now when I click on button with class settings first time, nothing happens as expected as the script is loaded after I click on button.



Second time, I click on this button, alert is shown one time (as expected).



But the unexpected behavior is, when I click for third time, alert is shown 2 times. When I click for 4th time, alert is shown 3 times and so on.



One possible reason that I can think of is, script was loading every time when I click.



What could be the issue? How can I prevent same piece of script from loading again and again?



Thanks!







javascript jquery ruby-on-rails






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 15 '18 at 10:22









Saqib ShahzadSaqib Shahzad

612420




612420













  • every time you click, you add another click handler to $('.settings') - perhaps you need the off jquery function

    – Bravo
    Nov 15 '18 at 10:24













  • how can I prevent this behavior? how can I add this only once?

    – Saqib Shahzad
    Nov 15 '18 at 10:26











  • perhaps you need the off jquery function

    – Bravo
    Nov 15 '18 at 10:27



















  • every time you click, you add another click handler to $('.settings') - perhaps you need the off jquery function

    – Bravo
    Nov 15 '18 at 10:24













  • how can I prevent this behavior? how can I add this only once?

    – Saqib Shahzad
    Nov 15 '18 at 10:26











  • perhaps you need the off jquery function

    – Bravo
    Nov 15 '18 at 10:27

















every time you click, you add another click handler to $('.settings') - perhaps you need the off jquery function

– Bravo
Nov 15 '18 at 10:24







every time you click, you add another click handler to $('.settings') - perhaps you need the off jquery function

– Bravo
Nov 15 '18 at 10:24















how can I prevent this behavior? how can I add this only once?

– Saqib Shahzad
Nov 15 '18 at 10:26





how can I prevent this behavior? how can I add this only once?

– Saqib Shahzad
Nov 15 '18 at 10:26













perhaps you need the off jquery function

– Bravo
Nov 15 '18 at 10:27





perhaps you need the off jquery function

– Bravo
Nov 15 '18 at 10:27












3 Answers
3






active

oldest

votes


















4














Each time you click, you add a new handler for .settings. Try this:



$(document).on('click', '.settings', function() {
alert();
});





share|improve this answer



















  • 1





    note: that will change this behaviour ... first time, nothing happens as expected

    – Bravo
    Nov 15 '18 at 10:27











  • @Bravo good call

    – joshweir
    Nov 15 '18 at 10:28



















2














This issue will be solved if Click event related to document is fired for only one time when you click first time in settings button.



If you want an event handler to only fire once then take a look at .one(): http://api.jquery.com/one



 $(document).one("click",function() {
$('.settings').click(function(){
alert();
});
});





share|improve this answer

































    0














    As @Bravo already suggested you need the off handler. You add a click event handler everytime you click. So you should remove the previous click handler before adding another. Something like:



    $(document).off('click').on('click', (function() {
    $('.settings').off('click').on('click', function(){
    alert();
    });
    });





    share|improve this answer























      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      autoActivateHeartbeat: false,
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53317239%2fsame-script-loading-multiple-times-on-click-event-javascript-jquery%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      3 Answers
      3






      active

      oldest

      votes








      3 Answers
      3






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      4














      Each time you click, you add a new handler for .settings. Try this:



      $(document).on('click', '.settings', function() {
      alert();
      });





      share|improve this answer



















      • 1





        note: that will change this behaviour ... first time, nothing happens as expected

        – Bravo
        Nov 15 '18 at 10:27











      • @Bravo good call

        – joshweir
        Nov 15 '18 at 10:28
















      4














      Each time you click, you add a new handler for .settings. Try this:



      $(document).on('click', '.settings', function() {
      alert();
      });





      share|improve this answer



















      • 1





        note: that will change this behaviour ... first time, nothing happens as expected

        – Bravo
        Nov 15 '18 at 10:27











      • @Bravo good call

        – joshweir
        Nov 15 '18 at 10:28














      4












      4








      4







      Each time you click, you add a new handler for .settings. Try this:



      $(document).on('click', '.settings', function() {
      alert();
      });





      share|improve this answer













      Each time you click, you add a new handler for .settings. Try this:



      $(document).on('click', '.settings', function() {
      alert();
      });






      share|improve this answer












      share|improve this answer



      share|improve this answer










      answered Nov 15 '18 at 10:26









      joshweirjoshweir

      1,90821135




      1,90821135








      • 1





        note: that will change this behaviour ... first time, nothing happens as expected

        – Bravo
        Nov 15 '18 at 10:27











      • @Bravo good call

        – joshweir
        Nov 15 '18 at 10:28














      • 1





        note: that will change this behaviour ... first time, nothing happens as expected

        – Bravo
        Nov 15 '18 at 10:27











      • @Bravo good call

        – joshweir
        Nov 15 '18 at 10:28








      1




      1





      note: that will change this behaviour ... first time, nothing happens as expected

      – Bravo
      Nov 15 '18 at 10:27





      note: that will change this behaviour ... first time, nothing happens as expected

      – Bravo
      Nov 15 '18 at 10:27













      @Bravo good call

      – joshweir
      Nov 15 '18 at 10:28





      @Bravo good call

      – joshweir
      Nov 15 '18 at 10:28













      2














      This issue will be solved if Click event related to document is fired for only one time when you click first time in settings button.



      If you want an event handler to only fire once then take a look at .one(): http://api.jquery.com/one



       $(document).one("click",function() {
      $('.settings').click(function(){
      alert();
      });
      });





      share|improve this answer






























        2














        This issue will be solved if Click event related to document is fired for only one time when you click first time in settings button.



        If you want an event handler to only fire once then take a look at .one(): http://api.jquery.com/one



         $(document).one("click",function() {
        $('.settings').click(function(){
        alert();
        });
        });





        share|improve this answer




























          2












          2








          2







          This issue will be solved if Click event related to document is fired for only one time when you click first time in settings button.



          If you want an event handler to only fire once then take a look at .one(): http://api.jquery.com/one



           $(document).one("click",function() {
          $('.settings').click(function(){
          alert();
          });
          });





          share|improve this answer















          This issue will be solved if Click event related to document is fired for only one time when you click first time in settings button.



          If you want an event handler to only fire once then take a look at .one(): http://api.jquery.com/one



           $(document).one("click",function() {
          $('.settings').click(function(){
          alert();
          });
          });






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Nov 15 '18 at 10:38

























          answered Nov 15 '18 at 10:33









          Chinmoy SamantaChinmoy Samanta

          1,104313




          1,104313























              0














              As @Bravo already suggested you need the off handler. You add a click event handler everytime you click. So you should remove the previous click handler before adding another. Something like:



              $(document).off('click').on('click', (function() {
              $('.settings').off('click').on('click', function(){
              alert();
              });
              });





              share|improve this answer




























                0














                As @Bravo already suggested you need the off handler. You add a click event handler everytime you click. So you should remove the previous click handler before adding another. Something like:



                $(document).off('click').on('click', (function() {
                $('.settings').off('click').on('click', function(){
                alert();
                });
                });





                share|improve this answer


























                  0












                  0








                  0







                  As @Bravo already suggested you need the off handler. You add a click event handler everytime you click. So you should remove the previous click handler before adding another. Something like:



                  $(document).off('click').on('click', (function() {
                  $('.settings').off('click').on('click', function(){
                  alert();
                  });
                  });





                  share|improve this answer













                  As @Bravo already suggested you need the off handler. You add a click event handler everytime you click. So you should remove the previous click handler before adding another. Something like:



                  $(document).off('click').on('click', (function() {
                  $('.settings').off('click').on('click', function(){
                  alert();
                  });
                  });






                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 15 '18 at 10:31









                  CptArcaniumCptArcanium

                  166




                  166






























                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53317239%2fsame-script-loading-multiple-times-on-click-event-javascript-jquery%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      Popular posts from this blog

                      Xamarin.iOS Cant Deploy on Iphone

                      Glorious Revolution

                      Dulmage-Mendelsohn matrix decomposition in Python