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

您的load（）和文档就绪之间似乎存在竞争条件。

要解决此问题，您需要：

在附加点击事件之前等待load（）完成
或将点击附加到您的load（）步骤的容器并使用事件委派。

有关如何使用on()进行委派的详情，请参阅this page和this other one。

代码如下所示：

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

Answer 2

需要通过页面上存在的元素应用“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>

Answer 3

使用SSI解决了我的问题。我试图保持所有本地驱动器友好，但它似乎造成了比预期更多的问题。

选择你喜欢的开发环境......我没有遇到任何冲突。

ASP - 

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

以防其他人遇到类似的问题。

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

3 个答案: