вызов внешнего скрипта и .load конфликт jquery

Question

Я уверен, что это еще один DOH! facepalm вопросы, но как дизайнер, а не программист Мне нужна помощь, чтобы понять это правильно.

У меня есть индексный файл, вызывающий локальные файлы .html через jQuery .load. Так же, как это: (некоторые вкладки функциональности не родственница здесь - таким образом, ссылка целевого вызова)

<a href="#lightbox">Lightbox</a></li> 

<div id=lightbox"> 
    <div class="load"> 
     <script type="text/javascript"> 
      $('.load').load('examples/lightbox.html'); 
     </script> 
    </div> 
</div> 

У меня также есть файл внешних .js, который имеет кучу функций, которые обрабатывают некоторые лайтбоксы среди других вещей. Стандартный <script src="js/typography.js" type="text/javascript"></script> Который содержит:

$(document).ready(function(){ 
    $(".open-lightbox").on("click", function(){ 
     $('.lightbox').css('display','block'); 
    }); 
    $('.close-lightbox').click(function(){ 
     $('.lightbox').css('display','none'); 
    }); 
}); 

Моя проблема заключается в том, что если внешне называется .html файл имеет какие-либо элементы, зависящие от .js файл т.е.. всплывающее окно лайтбокса не работает.

что-то вроде:

<a href="#" class="open-lightbox">LightBox Link</a> 

<div class="lightbox"> 
    lightbox content 
    <a href="#" class="close-lightbox">Close</a> 
</div> 

Если я переместить HTML-код прямо на странице индекса вместо .load, не проблема, если же я переместил JS как инлайн <script>...</script>, а не называть его extrenally. Прекрасно работает в обоих случаях.

Мое spidey sense говорит мне, что это имеет какое-то отношение к моей функции и .load не выполняется в том порядке, в котором они мне нужны, но мои навыки копирования/вставки javascript только заходят так далеко.

Может ли кто-нибудь сказать мне, могу ли я сделать эту комбинацию? Я бы очень признателен.

EDIT

---

Может быть, я объяснил мой сам плохо так что позвольте мне попробовать и опубликовать лучший пример. Если мой индексный код соблюден, все работает: мой лайтбокс открывается, как и предполагалось.

<li><a href="#thistabid">Link to open Tab Content</a></li> 

<div id="thistabid"> 
    <--Tab Content below--> 
     <div class="somehtmlpage-load"> 
      <a href="#" class="open-lightbox">LightBox Link</a> 

      <div class="lightbox"> 
       lightbox content 
       <a href="#" class="close-lightbox">Close</a> 
      </div> 
     </div> 
    <--End Tab Content--> 
</div> 

При нажатии этой вкладки появляется содержимое внутри «thistabid». Каким бы ни был этот контент.

Теперь, если я делаю:

<li><a href="#thistabid">Link to open Tab Content</a></li> 

<div id="thistabid"> 
    <--Tab Content below--> 
     <div class="somehtmlpage-load"> 
      <script type="text/javascript"> 
       $('.somehtmlpage-load').load('examples/lightbox.html'); 
      </script> 
     </div> 
    <--End Tab Content--> 
</div> 

Лайтбокс не работает. Содержание lightbox.html является

<a href="#" class="open-lightbox">LightBox Link</a> 

<div class="lightbox"> 
    lightbox content 
    <a href="#" class="close-lightbox">Close</a> 
</div> 

же, как HTML в 1-ом примере, где все работает. Единственная разница в том, что он загружается jQuery, а не жестко закодирован.

Что я имею в виду под «если у внешнего файла .html есть какие-либо элементы, зависящие от файла .js, т. Е. Всплывающее окно лайтбокса» заключается в том, что если html является частью внешнего файла, тогда функция лайтбокса не является за работой. Если он жестко закодирован, он появляется, как и предполагалось.

На 1-й взгляд .он кажется, должно быть решение, но наиболее likley моя реализация этого является от марки:/

Answer 1

Там, кажется, состояние гонки между нагрузкой() и документ готов.

Для решения этой проблемы вам необходимо:

• либо ждать нагрузки() для завершения перед подключением щелчка события
• или прикрепить щелчок к контейнеру вашей нагрузки() шаг и использовать делегирование событий.

См this page и this other one для получения дополнительной информации о том, как использовать on() для делегирования.

код будет выглядеть следующим образом:

$(".somehtmlpage-load").on("click", ".open-lightbox", function(){ 
$('.lightbox').css('display','block'); 
}); 

Answer 2

«на» или «живой» функция должна быть применена через элемент, который существует на этой странице. Обычно используется какой-либо родительский элемент фактического элемента. Вы можете попробовать что-то в следующих строках с правильными ссылками на элементы на своей странице:

<li><a href="#thistabid">Link to open Tab Content</a></li> 
<div id="thistabid"> 
    <--Tab Content below--> 
    <div class="somehtmlpage-load"> 
     <!--leave tab empty for now -->   
    </div> 
    <--End Tab Content--> 
</div> 

<script> 
(function(){ 
    $('.somehtmlpage-load').load('examples/lightbox.html'); 

    //live or on needs to be applied to an element that exists on th page 
    $('#thistabid').on('click', '.open-lightbox', function(){ 
    $('.lightbox').css('display','block'); 
    }); 

    $('#thistabid').on('click', '.close-lightbox', function(){ 
    $('.lightbox').css('display','none'); 
    }); 
})(); 
</script> 

Answer 3

Использование SSI решило мою проблему. Я старался держать все это на локальном диске, но это, казалось, вызывало больше проблем, чем ожидалось.

Выберите свою любимую среду для разработчиков ... Я тоже не столкнулся с конфликтами.

ASP - <!--#include file = "examples/lightbox.html" -->

PHP - <?php include 'examples/lightbox.html';?>

Только в случае, если кто-то работает с аналогичной проблемой.