在 AJAX 成功后调用 Javascript 库

Call Javascript Library after AJAX Success

本文关键字：Javascript 调用 AJAX 成功      更新时间：2023-09-26

我有一个主页，它使用 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 成功函数上执行引导选择.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*/);
相关文章：