javascript - Uncaught Error :cannot call methods prior to initialization;

Question

我正在使用 bootbox 在弹出窗口中调用表单

bootbox.alert(myform, function () {
  }).find("div.modal-dialog").addClass("largeWidth");

表单中有一个调色板颜色选择器(evol colorpicker)

$(document).ready(function () {
    $("#cd_bundle_entitiesbundle_call_Color").colorpicker();
 });

第一次弹出表单打开调色板时，颜色选择显示正常，但仅限一次。 之后，如果我关闭弹出窗口并在按下颜色选择调色板时再次打开它，则会出现错误
未捕获错误:在初始化之前无法调用颜色选择器上的方法；尝试调用方法“hidePalette”

阅读类似的问题，我想我必须销毁引导框弹出窗口，因此在引导框的回调中尝试了 $(this).empty 或 $(this).remove() 但没有工作

这是我在带有一些js的html文件中的表单

<div class="col-lg-6">

        {{ form_start(form, {'action': path('calls_edit_exec'),'attr': {'class': 'callform'} } ) }}
        <fieldset>

            {{ form_errors(form) }}
            <div class="row">
                <label class="col-md-3">Requestor</label>
                <label class="input col-md-5">{{ form_widget(form.Requestor) }}</label>
                <span id="inforeq" class="inforeq fade info  alert-success" ></span>

            </div>

            <div class="row">
                <label class="col-md-3">CallStatus</label>
                <label class="input col-md-5">{{ form_widget(form.CallStatus) }}</label>
            </div>

            <div class="row">
                <label class="col-md-3">Color</label>
                <label class="input col-md-5">{{ form_widget(form.Color) }}</label>
            </div>

            <span class="fade">
                <input id="mycolor" class="colorPicker evo-cp0" />
            </span>

            <div class="row">
                <label class="col-md-3">AssignedTo</label>
                <label class="input col-md-5">{{ form_widget(form.AssignedTo) }}</label>
                <span id="infouser" class="infouser fade info  alert-success" ></span>
            </div>

            <div class="row">
                <label class="col-md-3">Category</label>
                <label class="input col-md-5">{{ form_widget(form.CallCategory) }}</label>
                <span id="infouser" class="infouser fade info  alert-success" ></span>
            </div>

            <div class="row col-lg-12">
                <div class="row">
                    <label class="col-md-3">Call Problem</label>
                </div>
                <div class="row">
                    <label class=" textarea col-md-12">{{ form_widget(form.CallProblem) }}</label>
                </div>
                <div class="row">
                    <label class="col-md-3">Call Solution</label>
                </div>
                <div class="row" >
                    <label class="textarea col-md-12">{{ form_widget(form.CallSolution) }}</label>
                </div>
                <div class=" form-control">
                    <input class="form" type="checkbox" name="createready" id="createready">Make this Ready Call/Solution<br>
                </div>
            </div>

        </fieldset>
        {{ form_end(form) }}
    </div>
 <script>
        $(document).ready(function () { $("#cd_bundle_entitiesbundle_call_Color").colorpicker();
   }); </script>  

点击一下，表单就会从 ajax 调用返回

$.ajax({
                                url: url,
                                success: function (data) {
                                    bootbox.alert(data, function () {

                                       // $this.empty();
                                    }).find("div.modal-dialog").addClass("largeWidth");

                                }
                            });  

要在弹出窗口中获取表单，我正在使用 bootbox

Answer 1

我假设您使用它来加载带有远程内容的模式:

$.ajax({
    url: url,
    success: function (data) {
        bootbox.alert(data, function () {
           // $this.empty();
        }).find("div.modal-dialog").addClass("largeWidth");
    }
});

如果是这样，我会使用 show.bs.modal方法作为触发颜色选择器的点:

$.ajax({
    url: url,
    success: function (data) {
        bootbox.alert({ 
            message: data, 
            callback: function () {
               // do something when dismissing the alert
            },
            className: 'largeWidth'
        })
        .on('show.bs.modal', function(){
            $("#cd_bundle_entitiesbundle_call_Color").colorpicker();
        });

    }
});

我还调整了您的示例以使用选项对象，如documentation所示。

值得注意的是，有size options对于 3.1.0 版本的 Bootstrap 模态，您可以像使用 largeWidth 类一样应用它，或者您可以使用 Bootbox 文档中所述的等效 size 选项链接到之前的内容。