Question

我正在使用我正在构建的这个网站遇到一些问题，我正在使用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>

这是交换图像的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();
        }
    });
});

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

知道为什么jQuery不会识别新的html？

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

（我知道onclick不是最好的方法，但它使早期开发变得容易）

Answer 1

尝试：

$('img.th').live('click', function(){...});

这样点击操作会附加到任何当前和未来的img.th选择器。

Answer 2

您需要在加载html后附加事件处理程序。

或者您可以使用.live（）

Answer 3

$.delegate往往更倾向于$.live。您可以从父元素委派事件侦听器，这将尊重所有当前和未来的子元素：

$('#thumbCont').delegate('img.th', 'click', function(e) {
  // ...
});

修改

有关delegate和live之间差异的详细信息：

他们的行为方式相似，但delegate往往优于live;由于如此多的代码依赖于它，因此建议live被弃用是有点远，但在{1.4}中引入delegate来解决live的一些陷阱（在1.3）。基本上，live将事件监听器附加到document，而delegate将它附加到传递给jQuery方法的选择器。意外冲突的可能性较小，性能更好，因为它只需要遍历一小部分元素，而live与（more here）斗争的链接存在一些副问题。 / p>

使用jQuery动态加载html

3 个答案: