Расширить функцию javascript в динамически загружаемом файле

Question

это проблема: У меня есть страница с некоторыми встроенными файлами .js, в этих файлах есть некоторые функции javascript. Теперь, если я загружаю некоторый контент на свою страницу с помощью функции загрузки jQuery, функции, о которых раньше не упоминалось, не влияют на новые включенные элементы ... Что делать?

function say_ciao(){ 
    alert('Ciao!!!'); 
} 

$('#home_button').on('click', function(){ 
    say_ciao(); 
}); 

$('#load_button').on('click', function(){ 
    $('#loader').load('externalpage.php'); 
}); 

http://jsfiddle.net/Ppvpp/

Большое спасибо за ваши ответы и извините за мой английский!

Answer 1

Использование делегирования событий. Если пользователь нажимает на элемент, он также «щелкнет» все родительские элементы этого элемента. Вы можете использовать это поведение:

Вместо

$('#home_button').on('click', function(){ 

использование:

$('selector for parent of that button').on('click', '#home_button', function() { 
    ... 
} 

Проблема в том, что на данный момент вы называете функции, она будет связывать обработчик ко всем элементам его соответствует в этом пункте. Если вы добавите новый элемент, соответствующий этому селектору, он не будет прикреплен к нему обработчиком (момент, когда вы привязали обработчик к элементам, уже прошел). Хитрость заключается в том, чтобы вместо этого привязать обработчик к родительскому объекту (объект, который не получает динамически добавленный), и выполнять эту функцию только в том случае, если элемент, щелкнувший по элементу, соответствует строке выбора во втором аргументе .on(). См. the docs.