アイソトープ検索がAjaxコンテンツで機能しない

Question

私のAjax読み込みリスト項目にIsotopeを使用して検索機能を作成しています。

同位体のドキュメントと例に従うことで、私は期待どおりに働いているデフォルトではscript-

<script type="text/javascript"> 
var grid = null; 

jQuery(function($) { 

var qsRegex; 

Isotope.Item.prototype._create = function() { 
    // assign id, used for original-order sorting 
    this.id = this.layout.itemGUID++; 
    // transition objects 
    this._transn = { 
    ingProperties: {}, 
    clean: {}, 
    onEnd: {} 
    }; 
    this.sortData = {}; 
}; 

Isotope.Item.prototype.layoutPosition = function() { 
    this.emitEvent('layout', [ this ]); 
}; 

Isotope.prototype.arrange = function(opts) { 
    // set any options pass 
    this.option(opts); 
    this._getIsInstant(); 
    // just filter 
    this.filteredItems = this._filter(this.items); 
    // flag for initalized 
    this._isLayoutInited = true; 
}; 

// layout mode that does not position items 
Isotope.LayoutMode.create('none'); 

// --------------- // 

// init Isotope 
grid = $('.grid').isotope({ 
    itemSelector: '.element-item', 
    layoutMode: 'none', 
    filter: function() { 
    var $this = $(this); 
    var searchResult = qsRegex ? $this.text().match(qsRegex) : true; 
    //var buttonResult = buttonFilter ? $this.is(buttonFilter) : true; 
    return searchResult; 
    //return searchResult && buttonResult; 
    } 
}); 

// use value of search field to filter 
var $quicksearch = $('#quicksearch').keyup(debounce(function() { 
    qsRegex = new RegExp($quicksearch.val(), 'gi'); 
    grid.isotope(); 
})); 

// debounce so filtering doesn't happen every millisecond 
function debounce(fn, threshold) { 
    var timeout; 
    return function debounced() { 
    if (timeout) { 
     clearTimeout(timeout); 
    } 
    function delayed() { 
     fn(); 
     timeout = null; 
    } 
    setTimeout(delayed, threshold || 100); 
    }; 
} 
}); 
</script> 

の下に作成された、と私はすべてのAjax call-後（同位体）の項目を再ロードするために、私のAJAX呼び出し後の行の下に追加しました

grid.isotope('reloadItems'); 

これも機能しています。その後、私は検索値に基づいて項目をフィルタリングするためにコードの下で試しましたが、動作しませんでした。 Ajax呼び出しの後

grid.isotope('appended', '.element-item'); 

、アイテムは検索値に基づいて更新されていません。 「york」で検索すると、「york」で既存のアイテムがフィルタリングされています。しかし、Ajaxを使用してアイテムを追加した後は、検索フィールドの値を追加または削除する以外は、新しいアイテムをフィルタリングしません。

私には何が欠けていますか？あなたの助けに感謝します。

Answer 1

は同位体を破壊し、再初期化するようにしてください：

grid.isotope('destroy'); 
grid = $('.grid').isotope({....})