Загружать контент HTML через jQuery - PullRequest
Новая
       22

Загружать контент HTML через jQuery

0 голосов
/ 19 марта 2012

Я ищу способ динамически загружать страницу (страницу A) (которую я также создаю, а не внешнюю страницу в Интернете) на существующую страницу (страницу B). Цель состоит в том, чтобы повлиять на поведение страницы A в Javascript / jquery, используемом на странице B. Пример: когда нажимается кнопка на странице A, я хочу, чтобы Javascript на странице B реагировал на это.

Я пытался сделать это с помощью функции jQuery $ (). Load (), но это не позволяет мне вызывать javascript страницы B со страницы A.

Конкретный код: моя страница B содержит это: 

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        initCallback : carousel_callback
    });
});

И у меня есть функция, которая добавляет новую вкладку в карусель и загружает содержимое со страницы (страницы A) в эту вкладку. 

$('.ref').click(function() {
        var newTabId = jQuery('#mycarousel').jcarousel('size') + 1;
        carousel
                .add(
                        newTabId,
                        "<li style='width: 50%;'><div id='tab" + newTabId + "' style='height: auto;'></div></li>");
        // load content
        $("#tab" + newTabId).load("/researchPad" + $(this).attr('id'));
    });

Это работает для статического содержимого (поэтому, когда у меня есть статические вкладки в карусели). Теперь я хочу, чтобы это также работало для вкладок, которые добавляются динамически.

Как одна из предложенных реакций, я попытался поместить javascript в отдельный файл и связать обе главные страницы как страницу, которая загружается в этот скрипт. Однако это не заставляет их разделять контекст.

Ответы [ 3 ]

0 голосов
/ 19 марта 2012

jQuery имеет отдельный метод getScript для динамической загрузки JavaScript.

Удалите свой встроенный код со страницы A и поместите во внешний файл JavaScript, назовите его страницей C. Затем на странице B сделайте что-то вроде: 

$.load('pageA.html', function(data) {
    $.getScript('pageC.js');
});

Тем не менее, я готов поспорить, что вы можете полностью исключить getScript, переписав код на странице C, чтобы он работал с .live элементами DOM, и загрузив pageC.js в обычным образом в <head> на странице B.

0 голосов
/ 19 марта 2012

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

$(button).click(function(){blabla})

перед загрузкой страницы, кнопки, загруженные с помощью .load, не будут затронуты.

Я предлагаю вам связать ваши события в функции и затем вызывать ее после завершения .load. Но не забудьте отменить привязку существующих привязок из-за двойного выполнения.

0 голосов
/ 19 марта 2012

Я подозреваю, что это может быть как-то связано с этим: Из документации JQuery для load ():

"jQuery использует свойство браузера .innerHTML для анализа полученного документа и вставки его в текущий документ. Во время этого процесса браузеры часто фильтруют элементы из документа, такие как элементы , или . В результате элементы, извлеченные с помощью .load (), могут не совпадать, как если бы документ был получен непосредственно браузером. "

Где находится ваш javascript на странице B? В главном разделе?

...