MaterializeアコーディオンはAlgoliaテンプレートでは機能しません

Question

Algoliaの製品ゲインの説明をMaterializeのアコーディオンに入れようとしていますが、クリックするとトリガされません。ここで

は、私の見解ではコードです：ここで

<div class="row"> 
    <div id="hits-container"></div> 
    </div> 

<script src="https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js"></script> 
<script src="<?php echo js_url('jquery.min')?>"></script> 
<script src="<?php echo js_url('initialization')?>"></script> 
<script src="<?php echo js_url('pluginAlgolia')?>"></script> 
<script src="<?php echo js_url('materialize.min')?>"></script> 
<script> 
    $(document).ready(function(){ 
    $('select').material_select(); 
    $('.collapsible').collapsible(); 
    }); 
</script> 

はpluginAlgolia.jsでヒットウィジェットのコードです：

：

search.addWidget(
instantsearch.widgets.hits({ 
    container: '#hits-container', 
    hitsPerPage: 6, 
    templates: { 
    empty: noResultsTemplate, 
    item: hitTemplate 
    } 
    }) 
); 

そして、ここではinitialization.jsでテンプレートです

var hitTemplate = 
'<div class="col s12 m6 l4">' + 
    '<article class="hit">' + 
    '<div class="product-picture-wrapper center">' + 
    '<div class="product-picture"><img src="{{image}}" /></div>' + 
    '</div>' + 
    '<div class="product-name"><h4>{{{_highlightResult.designation.value}}}</h4></div>' + 
    '<ul class="collapsible" data-collapsible="accordion">' + 
     '<li>'+ 
     '<div class="collapsible-header">Description</div>' + 
     '<div class="collapsible-body">' + 
      '{{{_highlightResult.description.value}}}' + 
     '</div>' + 
     '</li>' + 
     '</ul>' + 
    '<div class="product-price">${{prixttc}}</div>' + 
    '</article>' + 
    '</div>'; 

Answer 1

.collapsible()への呼び出しは、DOMが完全にロードされている場合にのみ発生します。初めて。

ただし、instantsearch.jsがテンプレートをレンダリングするたびに、.collapsible()が呼び出されていない新しい要素がDOMに追加されます。

ただしinstantsearch.jsのrender eventは、これらの新しく作成されたDOM要素に.collapsible()を呼び出すために使用することができます。

search.on('render', function() { 
    $('.collapsible').collapsible(); 
}); 

これも、それはすでに呼び出さされた要素に.collapsible()を呼び出します。 collapsibleは分かりませんが、同じ要素に対して2回呼び出すとその動作が間違っている可能性があります。
これを避けるには、呼び出されていない要素のみを対象としたいと思うでしょう。 collapsibleは、セレクタで除外できるDOM要素に属性またはクラスを追加することがあります。
そうでない場合は、単にこのようにそれを自分で追加することができます：それは私の問題を解決する

search.on('render', function() { 
    $('.collapsible:not(.collapsible-called)').collapsible().addClass('collapsible-called'); 
});