Home/ Questions/Q 8103205
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T23:28:34+00:00

If I have the following html: <html> <div id=main_content> <button>click me</button> <script src=main.js ></script>

  • 0

If I have the following html:

<html>
   <div id="main_content">
      <button>click me</button>
      <script src="main.js" ></script>
   </div>
</html>

And main.js:

$('#main_content').on('click', 'button', function() {
    console.log('you clicked');
});

If I do a full page load, then clicking the button only registers one console message. If, however I subsequently re-load main_content's contents via an AJAX request then each button click gives 2 console messages. It will give 3,4,5… messages for each subsequent AJAX load, but always one for a full page reload.

Might someone explain this behavior and suggest possible solutions?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you really need to reload that script all the time, then do this in it:

    $('#main_content').off("click").on('click', 'button', function() {
    console.log('you clicked');
});

    Otherwise put it somewhere else obviously.

    • 0