jQuery Ajax - функция загрузки дублирует обработчики событий щелчка

Question

У меня проблема с jQuery Ajax.У меня есть функция загрузки:

• основной файл, который загружает первую страницу в файл # my_div

• ajax.php для загрузки следующей или предыдущей страницык # my_div.

Я добавлю, что это очень упрощенный шаблон, у меня в конечном итоге много функций и вещей.Здесь я представляю основную проблему.

Основной файл:

<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:

<?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
}
?>

Сайт работает правильно (библиотека jquery верна, консоль не работает)не возвращает никаких ошибок), но когда я переключаюсь между страницей 1 и страницей 2 - консоль возвращает странные значения после повторной загрузки той же страницы.

Например:

1. Загрузить основной файл, консольничего не возвращается - хорошо
2. Нажмите кнопку «Далее», консольный возврат:

test1 следующий

Нажмите кнопку «Назад» (для возврата со страницы 2 на страницу 1), возврат консоли:

тест1 назад

тест2 назад

Снова нажмите кнопку «Далее» (для перехода на страницу 2), возврат на консоль:

test1 следующий

test2 следующий

Нажмите еще раз кнопку «назад» (для возврата на страницу1), возврат на консоль:

тест1 назад

тест2 назад

тест2 назад

test2 назад

В третий раз я нажимаю кнопку «Далее», возвращаем консоль:

test1 следующий

test2 следующий

test2 следующий

test2 следующий

Третий раз, когда я нажимаю кнопку «назад», консоль возвращается:

test1 назад

test2 назад

test2 назад

test2 назад

test2 back

test2 back

test2 back

test2 back

Скрипты дублируются при каждой следующей загрузке следующей страницы.

Как решить эту проблему?

Кстати.Я использовал jQuery v2.2.3.

Answer 1

Вы должны переместить ваши скрипты в «Основной файл».

При каждом изменении страницы ваши скрипты из файла PHP загружаются и выполняются снова и снова, и они добавляют дополнительные «события клика» каждый развремя.

Обновление: Кроме того, вы можете отменить привязку обработчиков событий щелчка в файлах PHP.Добавьте эту строку кода в ваши сценарии в файле PHP:

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

или

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

Например:

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

Лучший способ удалитьобработчик событий в jQuery?

Answer 2

Ваши события по-прежнему связаны при замене контента.Поскольку ваши кнопки навигации не меняются, вы продолжаете добавлять к ним обработчики.Проверьте события, связанные с вашими элементами в инспекторе браузера.И посмотрите, как включить обработчики off.

Или вы можете найти альтернативный способ отслеживать текущие / предыдущие / следующие страницы без повторного подключения обработчиков и избежать проблемыполностью, как показано в следующем примере.

Это будет отслеживать текущую страницу отдельно (не забудьте обновить количество страниц в обработчике nextstep):

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

РазрешитьВаш пример php будет уменьшен до:

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

Но если ваш пример php обрезается, это может не сработать.