AJAX成功後調用Javascript庫

我有一個主頁使用AJAX調用來顯示來自第二頁的內容，具體取決於用戶選擇。第二頁生成的元素之一是下拉列表。我的下拉列表使用Javascript庫格式化。AJAX成功後調用Javascript庫

我遇到的問題是，如果我把下拉元素放在主頁面上，它根本沒有問題。但是，如果它通過第二頁呈現（通過AJAX），則下拉不會呈現。我覺得我需要在成功時再次致電圖書館，但我確實不確定。

下面是從我的主網頁的AJAX代碼：

<script type="text/javascript"> 
    jQuery('input[name="location"]').click(function(){ 
     var data = {location : jQuery(this).val(), department : $('input[name="department"]:checked').val(), userID : 12345}; 
     jQuery.ajax({ 
      url: "/new-custom.php", 
      type:'POST', 
      data: data, 
      dataType: 'html', 
      async: 'true', 
      success: function(result){ 
       jQuery('#div-custom').html(result).show(); 
      } 
     });   
    }); 
</script>

這裏呈現的新-custom.php表單元素：

<div class="form-group"> 
    <label class="control-label" for="field_20">Room Type</label> 
    <select class="form-control selectpicker" id="field_20" name="field_20"> 
     <option value="0" selected>Select an option</option> 
     <option value="Double">Double</option> 
     <option value="Queen">Queen</option> 
     <option value="Standard">Standard</option> 
     <option value="King">King</option> 
    </select> 
</div>

下面是這是包含在我的主要的Javascript庫頁面：

<script src="/vendors/bower_components/bootstrap-select/dist/js/bootstrap-select.js"></script>

我需要以某種方式在AJAX succ上執行bootstrap-select.js庫ess功能？

非常感謝您的幫助！

來源

2016-01-22 Jason

任何的JavaScript將不得不使用存在的HTML元素後，所以在你的「成功」方法中。 – PHPglue

添加新元素後，需要初始化插件。

你的代碼更改爲：

 success: function(result){ 
      jQuery('#div-custom').html(result).show().find('.selectpicker').selectpicker(); // initialize new elements 
     }

來源

2016-01-22 01:10:24 DelightedD0D

這樣做 - 謝謝！ – Jason

爲更多的插件分配，如何實現這一目標？就像我有兩個插件分配相同的方式，但它給我的錯誤 – user3090790

是。當存在元素時，大多數插件和所有執行即時DOM操作的插件都需要進行初始化。所以，如果他們被AJAX加載，那麼你需要它們插入DOM後的AJAX回調中初始化它們

可以這樣做：

jQuery('#div-custom') 
     .html(result) 
     .show() 
     .find('.selectpicker') 
     .selectPluginName(/* options*/);

來源

2016-01-22 01:11:26 charlietfl

偉大的例子 - 謝謝！ – Jason

AJAX成功後調用Javascript庫

回答

相關問題