AJAXによって読み込まれたHTML上に新しいブートストラップセレクトピッカーコントロールを作成する方法は？

「Bootstrap-Select」スクリプトは、ページを更新するときにコンテンツに対してうまく機能しています。 selectでオプションを変更すると、#ajax_filterの新しいコンテンツが取得されますが、スクリプトBootstrap-Selectは機能しません。 AJAXの応答後にこのスクリプトを再ロードするにはどうすればよいですか？AJAXによって読み込まれたHTML上に新しいブートストラップセレクトピッカーコントロールを作成する方法は？

<!-- in <head> --> 
<script id="bselect1" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script> 

<div id="#ajax_filter"> 
    <select name='components[]' class="selectpicker form-control components" id='cheese' data-live-search="true" data-count-selected-text='<span class="label label-danger">{0}</span> Ser' title='<span class="label label-danger">0</span> Ser' multiple data-selected-text-format="count > 0"> 
    <option value="aaaa">AAA</option> 
    <option value="bbbb">BBBB</option> 
    </select> 
</div> 

<script> 
    $(function(){ 
    $('.components').on('change',function() { 
     $.ajax({ 
     url: 'menu/ajax_filter', 
     data: { 'components': components, 'size': size }, 
     type: "post", 
     success: function(data) { 
      $("#ajax_filter").hide().html(data).fadeIn('fast'); 
      $('#bselect1').remove(); 
      $.getScript("https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js", function() { 
      $('script:last').attr('id', 'bselect1'); 
      }); 
     } 
     }); 
    }); 
    }); 
</script>

出典

2017-10-24 Jack

このリンクはあなたにHTTPSを支援します。 //stackoverflow.com/questions/12773600/jquery-run-script-after-ajax-load –

あなたのアプローチは正しくはありません。ライブラリを参照する新しい<script>要素を作成して、コントロールの新しいインスタンスを作成することは望ましくありません。実際にはより多くの問題が発生します。

代わりに、あなたはこのように、AJAX呼び出しが完了し、DOMが更新された後、その上にselectpicker()関数を呼び出して直接新しい要素上のライブラリを初期化する必要があります。

$.ajax({ 
    url: 'menu/ajax_filter', 
    data: { 'components': components, 'size': size }, 
    type: "post", 
    success: function(data){ 
    $("#ajax_filter").hide().html(data).fadeIn('fast').find('.your-select-elements').selectpicker(); 
    } 
});

出典

2017-10-24 09:56:13

ありがとうございました。あなたのソウルーションはうまくいっていますが、私は2つの新しい問題があります： 1）selectpickerが選択したオプションを忘れました 2）ajaxレスポンスの後$（ 'コンポーネント'）on（ 'change'、function（）は再び動作しない – Jack

問題nr 2解決済み - $（document）.on（ 'change'、 '.components'、function（） – Jack

選択ピッカーを更新することができます。

$('.selectpicker').selectpicker('refresh');

出典

2017-10-24 09:56:09 Superslinky

AJAXによって読み込まれたHTML上に新しいブートストラップセレクトピッカーコントロールを作成する方法は？

答えて

関連する問題