javascript - 调用外部脚本和 .load jquery 冲突

Question

我很确定这是另一个 DOH! facepalm 问题，但作为设计师而不是程序员，我需要一些帮助才能正确解决问题。

我有一个索引文件，通过 jQuery .load 调用本地 .html 文件。像这样:(一些选项卡功能在这里不相关 - 因此链接目标调用)

<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>而不是在外部调用它。在这两种情况下都可以正常工作。

我的敏锐直觉告诉我这与我的功能和 .load 有关没有按照我需要的顺序执行，但我的 javascript 复制/粘贴技能只能做到这一点。

谁能告诉我这个组合是否可行？我真的很感激。

编辑

---

也许我解释得不好，所以让我尝试发布一个更好的例子。如果我的索引代码如下所示，一切正常:我的灯箱按预期弹出。

<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 相同，其中一切正常。唯一的区别是加载 jQuery 而不是硬编码。

我所说的“如果外部调用的 .html 文件有任何依赖于 .js 文件的元素，即灯箱弹出窗口”的意思是，如果 html 是外部调用文件的一部分，则灯箱功能不起作用.如果它是硬编码的，它会按预期弹出。

乍一看 .on 似乎应该是解决方案，但最可能的是我对它的实现不合时宜:/

Answer 1

“on”或“live”功能需要通过页面上存在的元素来应用。通常使用实际元素的一些父元素。您能否尝试在以下几行中正确引用页面上的元素:

<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>