我很确定这是另一个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我实现的是没谱:/
是的,我试过.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