用jQuery加载HTML片段

我对jQuery，Ajax和类似的东西都很陌生。我已经找到了如何将HTML片段注入到我的网站的解决方案：用jQuery加载HTML片段

$(document).ready(function(){ 
    $('a').click(openContent); //binding all anchors to this function 
}); 

function openContent(){ 
var path = $(this).attr('href'); 
$('#content').load(path); 

return false; //to prevent browser from loading the single HTML fragment 
}

这工作真的很好！问题是，当点击位于刚刚注入的新HTML片段中的锚点时，这些函数将不会被执行。所以这个片段不会被注入div，浏览器只会为它自己加载片段。

希望有解决方案，是不是靠谱...感谢

UPDATE：
好了，生活做了很好的工作，但是，

有也是在这些片段中连接到jQuery lightbox插件（balupton-edition）和rel =“lightbox-tour”的图片。它们显示在新窗口而不是lightbox-div中。有什么建议么？

来源

2010-05-06 sam

您是否尝试添加$（'＃content a'）。click（openContent）;在返回false之前; ？ – Adam 2010-05-06 18:02:16

是的，试过...没有工作 – sam 2010-05-06 18:50:18

使用现场，将它绑定到被添加的每个锚：

$('a').live('click',openContent);

来源

2010-05-06 18:00:46 derek

该死......这很容易，而且效果很棒！谢啦！ – sam 2010-05-06 18:14:13

，但也有图片连接到这些片段中的rel =“lightbox-tour”的jQuery lightbox插件（balupton-edition）。它们显示在新窗口而不是lightbox-div中。 – sam 2010-05-06 18:49:29

很酷。 – 2012-03-08 03:14:06

另外，在jQuery的1.4+可以使用
$(document).delegate('a', 'click', openContent);

*现场和代表之间的主要区别，活将事件附加到文档并处理事件，一旦它们起泡。使用委托，您可以指定将事件附加到的上下文。这里的例子和使用live完全一样。现在让我们说，你只需要锚点出现在一个ID为“contentArea”的div加载在这个庄园的内容。在这种情况下，你会写$("#contentArea").delegate('a', 'click', openContent);。

更多关于生活和委托之间的差异退房Quick Tip: The Difference Between Live() and Delegate()

来源

2010-05-06 18:32:34 joshatjben

如果你解释了'live'和'delegate'之间的区别，尤其是如果你包含了不同于'live'用法的上下文时，这将是一个更有用的答案（你的代码应该与derek的答案中的功能相同）。 – eyelidlessness 2010-05-06 18:35:38

伟大的一点，更新我的回答 – joshatjben 2010-05-06 18:52:06

我试过委托，但片段不会显示在div框中 – sam 2010-05-06 19:05:39

所以收藏不处理动态加载的链接？您可以更新代码以重新运行加载回调中的lightbox插件。类似这样的：

$(document).ready(function(){ 
    $('a').live('click', openContent); 
}); 

function openContent(){ 
    var path = $(this).attr('href'), 
     content = $('#content'); 

    // added callback here 
    content.load(path, function() { 
     content.lightbox(); 
    }); 

    return false; 
}

来源

2010-05-06 21:22:28 Andrew

用jQuery加载HTML片段

回答

相关问题