1

我很确定这是另一个 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>

单击该选项卡时，会显示“thisistabid”中的内容。无论内容是什么。

现在如果我这样做：

<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 似乎应该是解决方案，但最有可能我的实现是不合时宜的：/

4

3 回答 3

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>
于 2013-02-25T22:41:43.840 回答
1

您的 load() 和准备好的文档之间似乎存在竞争条件。

要解决这个问题，您需要：

  • 在附加点击事件之前等待 load() 完成
  • 或将单击附加到您的 load() 步骤的容器并使用事件委托。

有关如何使用委派的更多信息，请参阅此页面和其他页面。on()

代码如下所示：

$(".somehtmlpage-load").on("click", ".open-lightbox", function(){
 $('.lightbox').css('display','block');
});
于 2013-02-25T21:40:21.753 回答
0

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

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

平均售价 -<!--#include file = "examples/lightbox.html" -->

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

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

于 2013-02-26T16:58:57.703 回答