jQuery .load() и подстраницы

Я не просто новичок с Javascript. Я разрабатываю простой сайт, чтобы получить доступ к веб-программированию. Веб-сайт прост и структура, как это:jQuery .load() и подстраницы

Простой уль/li/меню навигации на основе CSS
Вложенные страницы загружаются в «DIV» с помощью JQuery, когда-либо пользователь Нажмите пункт соответствующее меню.
Некоторые из подстраниц используют различные JQuery на основе плагинов, таких как LightWindow, JTIP и т.д.

Функция JQuery, которая загружает суб-страницы, как это:

function loadContent(htmlfile){ 
    jQuery("#content").load(htmlfile); 
};

меню элементы пожаров метод LoadContent так:

<li><a href="javascript:void(0)" onclick="loadContent('overview.html');return false">overview</a></li>

Это загружает имя суб-страницы «overview.html» внутри «DIV».

Все.

Теперь это работает нормально, но некоторые из подстраниц с использованием плагинов на основе jQuery плохо работают при загрузке внутри «div». Если вы загружаете их отдельно в браузере, они работают нормально.

На основании выше у меня есть несколько Qustions:

Большинство плагинов основаны на JQuery и подстраниц загружаются внутри «index.html» с помощью функции «LoadContent». Должен ли я позвонить

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

на каждом суб-страницы?
Если на странице используется пользовательский плагин jQuery, то где я его называю? В «index.html» или на странице, где я его использую?
Я думаю, что любой сценарий, который вы назовете в «index.html», вы не должны называть их снова на любой из подстраниц, которые вы используете. Я здесь?

Все мои подстраниц похожи на это один: Это screenshot.html. Работа хорошо, когда я загрузить локально в браузере, но не работает при загрузке с использованием функции нагрузки Jquery в() внутри «index.html»

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml"> 

    <head> 
     <script type='text/javascript' src='js/prototype.js'></script> 
     <script type='text/javascript' src='js/scriptaculous/scriptaculous.js'></script> 
     <script type='text/javascript' src='js/lightview.js'></script> 
     <link rel="stylesheet" type="text/css" href="css/lightview.css" /> 
    </head> 

    <body> 
     <h3 style="text-align:left;">Screenshots</h3> 

     <div align="center"> 
      <a class="lightview" href="images/ss_win1.png" title="Title"><img src="images/ss_win1_thumb.png" alt="" class="whiteborder"/></a> 
      <a class="lightview" href="images/ss_win2.png" title="Title"><img src="images/ss_win2_thumb.png" alt="" class="whiteborder"/></a> 
      <a class="lightview" href="images/ss_win3.png" title="Title"><img src="images/ss_win3_thumb.png" alt="" class="whiteborder"/></a> 
     </div> 
    </body> 
</html>

источник

2010-05-30 user354051

Как правило, для плагинов, вам нужно будет повторно инициализировать их после вы программно заменить часть DOM, на которых они были применены, например:

function loadContent(htmlfile){ 
    jQuery("#content").load(htmlfile), function(response) { 

     // this gets executed after the response has been inserted into the DOM 
     jQuery(response).find("#someElement").fooPlugin(); 
    }); 
};

для обработчиков событий, вы можете просто использовать live или delegate, чтобы гарантировать, что они остаются нетронутыми после того, как элементы, к которым они присоединены, заменяются ,(Живой) manual говорит:

Присоединить обработчик к событию для всех элементов, которые соответствуют текущему селектора, сейчас или в будущем.

Пример:

$("a").live("click", function() { 
    alert("this will alert even after this anchor has been replaced via ajax"); 
});

источник

2010-05-30 16:21:48 karim79

Предположим, что вы используете плагин под названием myPlugin. Вы инициализировать его внутри index.html, как это:

jQuery(function() { 
    jQuery('#selector').myPlugin(); 
});

Теперь, как вы загружать содержимое динамически с помощью .load() и страницу, которая содержит #selector возвращается, плагин не будет работать. Причина этого проста: элемент #selector не существовал, когда вы вызывали .myPlugin(), поэтому загруженный #selector не затрагивается.

Вы должны вызвать .myPlugin() снова после того, как с помощью .load() применить плагин к новым элементам:

function loadContent(htmlfile) { 
    jQuery('#content').load(htmlfile, function(response) { 
     jQuery(response).find('#selector').myPlugin(); 
    }); 
}

Чтобы конкретно ответить на ваши вопросы:

Нет, в том числе JQuery достаточно один раз.
Вы вызываете его в index.html, загруженное содержимое должно принимать участие в загрузке плагинов.
Вы должны инициализировать плагины каждый раз при загрузке нового содержимого.

источник

2010-05-30 16:24:21

Вызов jquery должен использоваться только в индексном файле.

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

Хотя, гораздо удобней метод меню уль и подстраниц будет,

$('ul#menu li a').click(function() { 
    var url = $(this).attr('href'); 
    $('#content').load(url); 
});

К сожалению, если есть какие-либо опечаток там, на мой ITouch :)

источник

2010-05-30 16:29:12 duckbox

Если плагин HTML-страница, которая может быть открыт автономно в браузере, может быть, вы должны использовать страницу фрагмент нагрузки

$('#content').load('plugin.html #plugin-body');

не

загрузить всю страницу (more)

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

pluginInitialize (initParams);

функция вызывается со страницы загрузчика при загрузке плагина. Эта функция содержит логику инициализации плагина (может быть сложной и довольно сложной).

источник

2010-05-30 16:41:59

jQuery .load() и подстраницы

ответ

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