小编AJM*_*ell的帖子

使用jQuery动态加载html

我正在使用我正在构建的这个站点遇到一些问题,我正在使用jQuery的.load()来获取一个html文件并将其包含在我的站点的#content中

<a href="#" onclick="$('#content').load('port/1.html')">1</a>

被拉入的代码块在一些缩略图上有一个jQuery点击功能.

<div id="bigImg"><img src="images/1large.jpg" alt="Large View" id="lrg" /></div>
<div id="thumbCont">
<div class="thumb first"><img src="images/thumb1.jpg" alt="Thumbnail 1" data-lrg="images/1large.jpg" class="th"></div>
<div class="thumb"><img src="images/thumb2.jpg" alt="Thumbnail 2" data-lrg="images/2large.jpg" class="th"></div>
<div class="thumb"><img src="images/thumb3.jpg" alt="Thumbnail 3" data-lrg="images/3large.jpg" class="th"></div>
<div class="thumb"><img src="images/thumb4.jpg" alt="Thumbnail 5" data-lrg="images/4large.jpg" class="th"></div>
<div class="thumb last"><img src="images/thumb5.jpg" alt="Thumbnail 5" data-lrg="images/5large.jpg" class="th"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

这是交换图像的jQuery ..

$(document).ready(function() {
    $('img.th').click(function(){
        lrg = $(this).attr('data-lrg');
        olrg = $('#lrg');
        if (lrg != olrg.attr('src')) {
            olrg.fadeOut('normal',function(){olrg.attr('src',lrg)});
            olrg.fadeIn();
        }
    });
});
Run Code Online (Sandbox Code Playgroud)

因此,当用户单击图像时,jquery从data-lrg中提取新图像src.这个函数效果很好,直到我决定用jquery而不是php来拉html.

知道为什么jQuery不会识别新的HTML吗?

我的想法:我猜测它在加载页面的这一部分之前与jQuery设置商店有关,这告诉我需要找出一种方法告诉jQuery再看一下这个部分,或者看看整个页面......但我对如何做到这一点感到茫然.

(我知道onclick不是最好的方法,但它使早期开发变得容易)

javascript ajax jquery html5

2
推荐指数
1
解决办法
876
查看次数

标签 统计

ajax ×1

html5 ×1

javascript ×1

jquery ×1