javascript - AJAX成功后调用Javascript库

Question

我有一个主页，它使用 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>

这是在 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 src="/vendors/bower_components/bootstrap-select/dist/js/bootstrap-select.js"></script>

我是否需要以某种方式在 AJAX 成功函数上执行 bootstrap-select.js 库？

非常感谢您的帮助!

Answer 1

添加新元素后需要对插件进行初始化

将您的代码更改为:

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