jQuery Ajax - Load function duplicates click event handlers

Question

I have a problem with jQuery Ajax. I have a load function:

• main file which load a first page to #my_div

• ajax.php file to load next or prev page to #my_div.

I will add that this is a very simplified pattern, I ultimately have many functions and things. I present a basic problem here.

Main file:

<div>
    <div id="my_div"></div>
    <button id="prevstep">back</button>
    <button id="nextstep">next</button>
</div>
<script>
    jQuery("#my_div").load("http://localhost/ajax.php?section=page1");
</script>

ajax.php file:

<?php
if ($_GET["section"] == "page1") {
    ?>
    <div>something part 1</div>
    <script>
        $("#prevstep").on("click", function() {
            console.log("test1 back");
            jQuery("#my_div").load("http://localhost/ajax.php?section=page0");
        });
        $("#nextstep").on("click", function() {
            console.log("test1 next");
            jQuery("#my_div").load("http://localhost/ajax.php?section=page2");
        });
    </script>
    <?php
} elseif ($_GET["section"] == "page2") {
    ?>
    <div>something part 2</div>
    <script>
        $("#prevstep").on("click", function() {
            console.log("test2 back");
            jQuery("#my_div").load("http://localhost/ajax.php?section=page0");
        });
        $("#nextstep").on("click", function() {
            console.log("test2 next");
            jQuery("#my_div").load("http://localhost/ajax.php?section=page2");
        });
    </script>
    <?php
}
?>

Site working correctly (jquery library is correct, console doesn't return any errors), but when I switch between page1 and page2 - console return strange values after loading again the same page.

For example:

1. Load main file, console nothing return - ok
2. Click 'next' button, console return:

test1 next

3. Click 'back' button (to back from page2 to page1), console return:

test1 back

test2 back

4. Click again 'next' button (to go to page2), console return:

test1 next

test2 next

5. Click again 'back' button (to back to page1), console return:

test1 back

test2 back

test2 back

test2 back

6. Third time I click 'next' button, console return:

test1 next

test2 next

test2 next

test2 next

7. Third time I click 'back' button, console return:

test1 back

test2 back

test2 back

test2 back

test2 back

test2 back

test2 back

test2 back

Scripts duplicate each time the next page loads again.

How to resolve this problem?

BTW. I using a jQuery v2.2.3.

Answer 1

Your events are still bound when replacing content. Since your navigation buttons don't change you keep on adding handlers to them. Check events bound to your elements in the browser's inspector. And take a look on how to turn off handlers.

Or you could find an alternative way to keep track of the current / previous / next pages without reattaching handlers and avoid the problem entirely, as demonstrated in the next example.

This will keep track of current page by itself (be sure to update the number of pages in nextstep handler):

(function() {
  var page = 1;

  $("#my_div").load("http://localhost/ajax.php?section=page1");

  $('#prevstep').click(function() {
    if (page > 1) {
      page = page - 1;
      load();
    }
  });

  $('#nextstep').click(function() {
    // Check your bounds
    page = page + 1;
    load();
  });

  function load() {
    $('#my_div').load("http://localhost/ajax.php?section=page" + page);
  }
})();

Allowing your sample php to be reduced to:

if ($_GET["section"] == "page1") {
    ?>
    <div>something part 1</div>
    <?php
} elseif ($_GET["section"] == "page2") {
    ?>
    <div>something part 2</div>
    <?php
}

But if your sample php is trimmed down, this might not work for you.

Answer 2

You must move your scripts to the "Main file".

On every page change, your scripts from PHP file, are loading and executing over and over again and they are adding extra "click events" every time.

Update: Also, you can unbind click event handlers in PHP files. Add this line of code to your scripts in PHP file:

$('#myimage').unbind('click'); //jquery <1.7

or

$('#myimage').off('click'); //jquery >3.0

For example:

<script>
    $('#nextstep').unbind('click');
    $('#prevstep').unbind('click');        
    $("#prevstep").on("click", function() {
        console.log("te.......

Best way to remove an event handler in jQuery?