Как правильно удалить обработчик кликов?

Question

Я очень тяжело борюсь с этой проблемой.

У меня есть div для навигации и div, где загружается страница:

<div class="page"></div>

<div class="nav">
  <div class="page1">Page 1</div>
  <div class="page2">Page 2</div>
</div>

Страницы загружаются - когдапользователь нажимает на определенный метод div - посредством ajax load (). «Страница 1» - это домашняя страница, которая в основном содержит два div:

<div class="box"></div>
<div class="box"></div>

Это то, что я хочу: => Когда я нажимаю на .box div - этот .box div получает класс с именем .active. => Когда я снова нажимаю на этот .box div - класс .active из этого .box div должен быть удален.

Он прекрасно работает со следующим jQuery:

$(document).ready(function() {
  $(document).on("click", ".box", function() {
    $(this).toggleClass("active");
  });
});

НО ... Когда я переключаюсь на «Страница 2» и возвращаюсь к «Странице 1», которую я показал выше, и я нажимаю на .box div, «click» запускается дважды - так что одним щелчком мыши на .box div, .box div получаеткласс .active и класс .active удалены.

Что я здесь не так делаю?

[EDIT] Страницы загружаются с помощью AJAX:

$('.page').load('page1.php');
$('.page1').click(function() {
  $('.page').load('page1.php');
});
$('.page2').click(function() {
  $('.page').load('page2.php');
}); 

Answer 1

Пока это ответит на вашу проблему. Но я настоятельно не рекомендую это делать, потому что вы бы предпочли исправить корень ошибки, которая является критической логикой JS.

Так что «обходной путь», чтобы сбросить обработчик и связать событие с пространством имен.

$(document).off("click.box").on("click.box", ".box", function() {
  $(this).toggleClass("active");
});

Когда контент загружается с помощью ajax, вы всегда должны использовать элемент в качестве корня контента ajax, например $('.myAjaxRoot').on('click')

Настоятельно не рекомендуется всегда полагаться на$(document) особенно когда JS загружается через AJAX много раз.

$(function() {
    //put all this stuffs inside page1.php so when the DOM is cleared from AJAX, so does the events
    $(".content").on("click", ".box", function() {...});
});