Загрузка страница дважды AJAX вызывает .он («щелчок»), чтобы остановить функционирование

Question

Поэтому у меня есть страница, я нагружение в с AJAX, страница, как это:

<script> 
$(document).ready(function(e){ 
    console.log('binding clickable'); 
    console.log($('#clickable').length); 
    $('#clickable').off(); 
    $('#clickable').on('click',function(){ 
     console.log('hello'); 
    }); 
}); 
</script> 
<h1>New Page</h1> 
<p>Blah blah blah...</p> 
<div class="button" id="clickable">OK</div> 

Так что, когда я загружаю это страница с AJAX работает отлично.

Когда я загружаю эту страницу, а затем загружаю другую страницу, а затем снова загружаю эту страницу, она работает нормально.

Однако, когда я загружаю эту страницу, а затем снова загружаю эту страницу - кнопка #clickable больше не работает.

Когда я смотрю в консоли, я вижу binding clickable, поэтому функция $(document).ready() запускается нормально. И под этим в консоли я могу увидеть номер 1, поэтому я знаю, что селектор jQuery '#clickable' находит элемент DOM в порядке.

Я добавил строку $('#clickable').off() на случай, если событие дважды связано с элементом DOM. Но это не помогает.

Im загружает страницу стандартным звонком $.ajax({type:'GET',dataType:'text'});, этот код работает нормально. Проблема заключается не в том, как мы загружаем страницу через AJAX, проблема в том, что загруженная страница дважды приводит к прекращению работы функции .on('click').

Мы уже решили эту проблему, используя PHP для добавления случайной строки в конец тегов кнопок id и селектора jQuery, поэтому я предполагаю, что использование одного и того же селектора для каждой загрузки страницы является проблемой, но я надеялся, кто-то с большим количеством знаний может пролить свет на эту ситуацию.

• Может кто-нибудь объяснить мне, почему вторая загрузка страницы останавливает нажатие кнопки?

Answer 1

событие делегации Try, синтаксис:

$("body").on("click", "#clickable", function(event) { /*do something*/ }); 

подробнее here