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

我很确定这是另一个DOH！ facepalm问题，但作为设计师，而不是程序员我需要一些帮助，使其正确。调用外部脚本和.load jquery冲突

我有一个索引文件通过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文件的元素，即。弹出它的Lightbox不起作用。

类似：

<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感觉告诉我这和我的功能有关，.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文件的任何元素，即Lightbox弹出窗口”是，如果html是外部调用文件的一部分，那么lightbox函数不是加工。如果它被硬编码，它会弹出想要的。

1日一目了然。上看起来应该是解决办法，但最likley我实现的是没谱：/

来源

2013-02-25 Ionko Gueorguiev

似乎有你的load（）和文件准备之间的竞争条件。

为了解决这个问题，你将需要：

或者等待load（）来完成您将单击事件
之前或点击连接到你的负荷的容器（）步并使用事件代表团。

关于如何使用on()为委派的详细信息，请参阅this page和this other one。

的代码应该是这样的：

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

来源

2013-02-25 21:40:21 Christophe

是的，我试过.on，但没有帮我解决我的问题。我甚至用jQuery 1.7试用了遗留的.live，但那不起作用。也许我没有这样做，但我确实非常仔细地遵循API文档。 – 2013-02-25 21:52:07

我已经添加了一个代码示例，是你做了什么？ – Christophe 2013-02-25 21:59:25

不太好，如果你看看我的灯箱功能，我已经在那里。 .load div类与lightbox无关。这只是加载标签界面的内容。如果Lighbox是加载内容的一部分，则只会出现该问题。 – 2013-02-25 22:04:35

的“上”或“活”的功能需要通过在页面上存在的元素被应用。通常使用实际元素的一些父代。你可以尝试下面几行，并在页面上对元素进行正确引用：

<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-25 22:41:43 walmik

是的，这工作正常，但我可以将我的JS从外部文件移动到我的索引，也可以。我希望能有一种方法来保持所有的独立。 – 2013-02-25 23:14:43

是否要将调用负载函数的JS部分分开放在.somehtmlpage-load上，并为打开和关闭的lightbox分配点击操作？ – walmik 2013-02-25 23:27:12

是的，理想情况下，.load应该是独立的，并且希望不会干扰灯箱。 – 2013-02-25 23:50:47

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

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

ASP - 

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

以防万一别人运行到类似的问题。

来源

2013-02-26 16:58:57

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

回答

相关问题