Question

我正在建立一个网站，其中所有内部链接使当前页面淡出并且新内容淡入。我使用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插件来定位这个新加载的内容。这也不可能是我现在做事的方式。非常感谢你。

Answer 1

更新页面时，会删除旧的.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属性。现在应该可以了！

用jquery load（）加载的目标元素

1 个答案: