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>

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

jQuery（'input[name=“location”]”）。单击（function（）{
var data={location:jQuery（this）.val（），部门：$（'input[name=“department”]：checked'）.val（），userID:12345}；
jQuery.ajax({
url:“/new custom.php”，
类型：'POST'，
数据：数据，
数据类型：“html”，
异步：“true”，
成功：功能（结果）{
jQuery（'#div custom'）.html（result.show（）；
}
});        
});

以下是在new-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 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>

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

我是否需要在AJAX成功函数上执行bootstrap-select.js库

---

非常感谢您的帮助

添加新添加的元素后，需要在这些元素上初始化插件

将代码更改为：

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

---

对。大多数插件，以及所有直接进行DOM操作的插件，都需要在元素存在时进行初始化。因此，如果它们是由ajax加载的，那么在将它们插入DOM后，需要在ajax回调中对它们进行初始化

您可以执行以下操作：

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

---

任何JavaScript都必须在HTML元素存在后使用，因此在您的

success

方法中。要获得更多插件分配，如何实现这一点？就像我有两个插件分配相同的方式，但它给了我错误