Вызов Javascript на странице после ее загрузки с помощью jQuery GET
-
19-09-2019 - |
Вопрос
Представьте себе обычную страницу, вызывающую javscript в head.Проблема в том, что часть контента не загружается до тех пор, пока я не нажму на ссылку.Впоследствии, когда эта ссылка загружает контент, она не будет работать.Это потому, что я предполагаю, что javascript уже был запущен и поэтому не привязывается к тем элементам, которые будут вызваны позже.Вызывается только стандартный html-код.
Так, например, это код, который вызывает мой внешний html.
$.get('content.inc.php', {id:id}, function(data){
$('#feature').children().fadeTo('fast', 0).parent().slideUp('slow', function(){
$(this).html(data).slideDown('slow');
});
});
Если бы html, который я вызывал, например, и тег H1 уже был на странице, cufon работал бы.Однако, поскольку я загружаю контент с помощью вышеуказанного метода, теги H1 не будут изменены с помощью выбранного мной шрифта.Это только пример.То же самое будет применимо к любому javascript.
Я задавался вопросом, есть ли способ обойти это, не вызывая javascript, а также html, когда он получен из вышеупомянутой функции
Решение
Делает Cufon.refresh()
делай то, что ты хочешь?
Как вы сказали Cufon
был просто пример, я бы также предложил более общий:
$.get(url, options, function(html, status) {
var dom = $(html);
// call your function to manipulate the new elements and attach
// event handlers etc:
enhance(dom);
// insert DOM into page and animate:
dom.hide();
$target_element.append(dom); // <-- append/prepend/replace whatever.
dom.show(); // <-- replace with custom animation
});
Другие советы
Если вы хотите прикрепить события к элементам на странице, которые создаются динамически, взгляните на ключевое слово "live".
$('H1').live("click", function() { alert('it works!'); });
Надеюсь, это то, что вы искали.
Вы можете прикрепить обработчики событий к данным, которые вы получаете через get()
внутри функции обратного вызова.Например
$.get('content.inc.php', {id:id}, function(data){
$('#feature').children().fadeTo('fast', 0).parent().slideUp('slow', function(){
$(this).html(data).find('a').click(function(e) {
// specify an event handler for <a> elements in returned data
}).end().slideDown('slow');
});
});
live()
также может быть вариантом для вас, в зависимости от того, к каким событиям вы хотите привязаться (поскольку live()
использует делегирование событий, поддерживаются не все события).
Энди, попробуй это.Он будет вызывать код Cufon после завершения каждого AJAX-запроса и до фактического добавления html-кода на страницу.
$.get('content.inc.php', {id:id}, function(data){
$('#feature').children().fadeTo('fast', 0).parent().slideUp('slow', function(){
$(this).html(data);
Cufon.replace('h1');
$(this).slideDown('slow');
});
});
JavaScript не выполняется по соображениям безопасности или потому, что jQuery просто устанавливает для этого элемента innerHTML некоторый текст (который не интерпретируется как JavScript), если он содержится.Таким образом, безопасность - это побочный эффект.
Как это решить?
попробуйте найти все теги скрипта в Вашем ответе и выполнить их как исходные:
var scripts = myelement.getElementsByTagName("SCRIPT");
var i = 0;
for (i = 0; i < scripts.length; i++)
eval(scripts[i].innerHTML);