0

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 コードがあります。でロードされたアイテムにこの JavaScript を適用する方法はあります.load()か?

ジャスフィドル

4

2 に答える 2

1

石積みでは、要素を追加または削除するときにそれを伝える必要があるため、それに応じて自分自身を頼ることができます。これには 2 つの方法があります。

  1. $wall の石積みを破壊し、$wall の HTML を置き換え、$wall に石積みを構築します
  2. Masonry を使用して $wall の子を破壊し、Masonry を使用して新しい子を $wall に追加します -適切に配置できなかったため、これを実装するのに苦労しました

最初の例に続いて、いくつかの変更を加えました。JSFiddle

のすべてのインスタンスid="entry"をclass="entry"、および#entryに変更しました.entry。ID は、一度に 1 つの要素でしか使用できませんが、この目的のためにクラスが存在します。

返された 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
});
于 2013-06-22T00:44:44.767 に答える
0

jQuery Masonry は、さまざまなアイテムのレイアウトを処理します。ただし、ページの読み込み時に masonry 関数を 1 回だけ呼び出しています。問題を解決するには、新しいアイテムがロードされた後に masonry を再度呼び出す必要があります。そのため、関数「ローダー」の AJAX 呼び出し内で、既に行ったように何かを記述します。

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

$("#posts") の代わりに $wall 変数を使用するなど、コードを改善することもできます。

于 2013-06-21T23:51:56.750 に答える