Jsfiddle

Question

我正在尝试抓取使用Javascript组织的项目，并将它们放在我的页面内容上。我遇到的问题是，当我使用.load()时，它不会抓取任何javascript，因此我抓取的图片不在正确的组织中。

以下是我用来获取内容的功能：

function loader(url) {
    $.get(url, function(data) {
        $('#posts').fadeOut('normal',function(){$('#posts').html(data);});
        $('#posts').fadeIn('normal');
    }).error(function(url) {
        alert('error');
    });
};

经过研究，似乎为了获得javascript我需要使用Ajax

以下是：

我的页面上有完全相同的javascript代码，这是另一个未应用的页面的javascript。有没有办法可以在加载.load()的项目上应用此javascript？

Jsfiddle

Answer 1

砌体要求您在添加或删除元素时告诉它，以便它可以相应地求助。有两种方法可以做到这一点：

摧毁$ wall的砌体，替换$ wall的HTML，在$ wall上修建砌体
使用砌体摧毁$ wall的孩子，使用Masonry将新孩子添加到$ wall - I had trouble implementing this, as it failed to align properly

在第一个例子之后，我做了一些改变。 JSFiddle

将id="entry"的所有实例更改为class="entry"，将#entry更改为.entry。 ID一次只能由一个元素使用，而为此目的存在一个类。

将返回的HTML过滤为仅包含#posts的子项。我们不想包含<html>...<head>...</head><body>...。

$newPosts = $(data).filter(function(){
    return this.id === 'posts';
}).children();

摧毁了砌体，更新了HTML，重装的砌体

$wall.masonry('destroy');
$('#posts').html($newPosts);
$wall.masonry({
    itemSelector: '.entry, .entry_photo',
    isAnimated : false
});

Answer 2

jQuery Masonry正在处理不同项目的布局。但是你只在页面加载时调用一次砌体功能。要解决您的问题，您只需在加载新项目后再次调用砌体 - 因此在“加载器”功能中的AJAX调用内部写下您已经做过的事情：

$wall.masonry({
   itemSelector: '#entry, #entry_photo',
   isAnimated: false
});

您还可以改进代码，例如使用$ wall变量而不是$（“＃posts”）。

使用带有javascript内容的Jquery.load（）

Jsfiddle

2 个答案: