Javascript 调用外部脚本与.load jquery冲突

我敢肯定这是另一个DOH！facepalm的问题，但作为设计师，而不是程序员，我需要一些帮助，使其正确

我有一个索引文件，通过jQuery.load调用local.html文件。就这样, （某些选项卡功能在此处不相关-因此链接目标调用）

我的问题是，如果外部调用的.html文件有任何依赖于.js文件的元素，即lightbox弹出窗口，那么它就不起作用

比如：

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

<div class="lightbox">
   lightbox content
   <a href="#" class="close-lightbox">Close</a>
</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>

$（'.somehtmlpage load'）.load（'examples/lightbox.html'）；

灯箱坏了。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函数不起作用。如果它是硬编码的，它会像预期的那样弹出

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

---

乍一看，.On似乎应该是解决方案，但最有可能的是，我的实现偏离了目标：//

在load（）和document ready之间似乎存在竞争条件

要解决此问题，您需要：

• 在附加click事件之前，请等待load（）完成
• 或者将单击附加到load（）步骤的容器，并使用事件委派

有关如何使用

on（）

进行委派的更多信息，请参阅和

代码如下所示：

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

---

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

（功能（）{
$（'.somehtmlpage load'）.load（'examples/lightbox.html'）；
//live或on需要应用于第页上存在的元素
$（'#thistabid'）。在（'click'，'上。打开lightbox'，函数（）{
$（'.lightbox'）.css（'display'，'block'）；
});
$（“#thistabid”）。在（'单击'，'上。关闭lightbox'，函数（）{
$（'.lightbox'）.css（'display'，'none'）；
});
})();

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

选择您最喜欢的开发环境…我在这两个方面都没有遇到任何冲突

ASP-

PHP-

---

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

是的，我试过了。但没有帮我解决问题。我甚至尝试过遗留的东西。使用jQuery1.7生活，但那不起作用。也许我做得不对，但我确实非常仔细地遵循了API文档。不完全是这样，如果你看看我的lightbox函数，我已经在那里有了.on。.load div类与lightbox无关。这只是从选项卡式界面加载内容。只有当lighbox是加载内容的一部分时，问题才会出现。好吧，那么我不明白你所说的“如果外部调用的.html文件有任何依赖于.js文件的元素，即lightbox弹出窗口”是什么意思。我发布了一个编辑，希望能更好地澄清我的问题：/好的，我明白了。load div类与lightbox有关，因为load div成为lightbox按钮的容器。是的，这很好，但我可以将我的JS从外部文件移动到我的索引，这也很有效。我希望有一种方法可以将所有这些分开。是否要将调用.somehtmlpage load上的load函数的JS部分分开，并为打开和关闭灯箱分配单击操作？是的，理想情况下，.load应该是独立的，希望不会干扰灯箱。

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

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