как использовать JQuery на() в динамически загружаемых скриптов

Если у меня есть следующий HTML:как использовать JQuery на() в динамически загружаемых скриптов

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

И main.js:

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

Если я сделать полную загрузку страницы, а затем нажав кнопка регистрирует только одно консольное сообщение. Если, однако, я впоследствии повторно загружаю содержимое main_content's через запрос AJAX, тогда каждый щелчок кнопки дает 2 сообщения консоли. Он будет давать 3,4,5 ... сообщения для каждой последующей нагрузки AJAX, но всегда один для полной перезагрузки страницы.

Может кто-нибудь объяснить это поведение и предложить возможные решения?

источник

2012-06-20 tim peterson

переместите сценарий в голову или на самом дне тела. – Bergi

Если вам действительно нужны чтобы перезагрузить этот сценарий все время, затем сделайте это в нем:

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

В противном случае поместите его в другое место.

источник

2012-06-20 21:50:16 Esailija

благодаря тому, что я не думал о 'off()'. Иногда загрузка этого скрипта - это просто лень с моей стороны в тестировании вещей, но да, я обычно помещаю этот тип кода в другое место. –

Это потому, что вы загружаете несколько копий main.js и, следовательно, каждый раз подключаете еще один обработчик событий.
Каждый раз, когда вы загрузите <script> еще один обработчик присоединен

<button>click me</button> 
    <script src="main.js" ></script>

Урок здесь в том, что скрипт загружен AJAX разобран и поэтому, если у вас есть обработчики в них они присоединены

источник

2012-06-20 21:48:45

- @ Никола, вы можете объяснить свое последнее предложение немного больше. Полноценные загруженные скрипты не «разбираются»? Разница в обращении с тегами '

как использовать JQuery на() в динамически загружаемых скриптов

ответ

Смежные вопросы