使用jQuery动态加载html

我遇到了一些与我正在构建的网站有关的问题，我使用jQuery的.load（）来获取html文件并将其包含在我的网站的#content中使用jQuery动态加载html

<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没有做到这一点的最好办法，但它很容易让早期发展）

来源

2011-04-14 AJMaxwell

已经测试了简单的html页面，并且工作正常。 – TheVillageIdiot 2011-04-14 08:49:56

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

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

编辑

上delegate和live之间的差异更详细一点：

他们的行为方式类似，但delegate往往优于live;代码0123L已被弃用，因为代码依赖于代码，但在1.4中引入了delegate以解决live（在1.3中引入）的一些缺陷。基本上，live将事件侦听器附加到document，而delegate将其附加到传递给您的jQuery方法的选择器。意外碰撞的可能性较小，它表现更好，因为它只需要遍历一小部分元素，并且存在一些与（more here）奋斗的链接问题。

来源

2011-04-14 08:36:05

那么我不知道这一点。你每天学习新的东西。 – 2011-04-14 09:16:48

尝试：

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

这样的点击动作连接到任何当前和未来img.th选择器。

来源

2011-04-14 08:28:44

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

或者你可以使用.live（）

来源

2011-04-14 08:31:36 herostwist

使用jQuery动态加载html

回答

相关问题