[英]Targetting elements loaded with jquery load()
我正在做一个网站,所有内部链接使当前页面淡出,新内容淡入。我使用jquery load()做到了。 加载和衰落部分的工作原理如下:
var $mainContent = $("#ajaxcontainer"),
$internalLinks = $(".internal"),
URL = '',
$ajaxSpinner = $("#loader"),
$el;
$internalLinks.each(function() {
$(this).attr("href", "#" + this.pathname);
}).on('click', function() {
$el = $(this);
URL = $el.attr("href").substring(1);
URL = URL + " #container";
$mainContent.fadeOut(500, function() {
$ajaxSpinner.fadeIn();
$mainContent.load(URL, function() {
$ajaxSpinner.fadeOut( function() {
$mainContent.fadeIn(1000);
});
});
});
});
如您所见,我按给定它们的类(.internal)定位所有内部链接。 我的问题是,一旦用ajax加载了内容,我就无法通过jquery定位此新内容,因此$ internalLinks.each()等将损坏,这意味着该站点仅恢复为默认链接行为。
与此相关的另一件事是,我希望能够使用jquery.masonry插件来定位此新加载的内容。 我现在做事情的方式也不可行。 非常感谢你。
更新页面时,旧的.internal
链接将被删除,因此附加到它们的事件处理程序将无法正常工作。 更改代码以使用事件委托:
$('.internal').each(function() {
$(this).attr("href", "#" + this.pathname);
});
$(document).on('click', '.internal', function() {
$el = $(this);
URL = $el.attr("href").substring(1);
URL = URL + " #container";
$mainContent.fadeOut(500, function() {
$ajaxSpinner.fadeIn();
$mainContent.load(URL, function() {
$ajaxSpinner.fadeOut( function() {
$mainContent.fadeIn(1000);
});
$('.internal').each(function() {
$(this).attr("href", "#" + this.pathname);
});
});
});
});
如您所见,我也在刷新后刷新了每个链接的属性href
。
**编辑**我第一次缺少更改href
属性。 现在应该可以了!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.