模态 - JQuery - JS - FullCalendar 上的 Select2 问题

Question

我遇到了一个问题，如果我从 JQuery 附加数据，它没有格式，但如果我直接从 PHP 执行它，它会在同一模态中正确获取格式。。

到目前为止 2 天试图通过在询问之前到处阅读来获得答案，但我现在不确定，相同的代码，相同的模式，如果通过 JQuery 发送不起作用，直接在 PHP 中它会起作用。我不确定是否是 Select2 的初始化，我读了很多关于它可能的内容，但无法弄清楚如何，我尝试了不同的东西，仍然无法通过 JQuery 使其工作。感谢您的帮助！

以下是有问题的代码：

.append("<div class='col-md-6'><div class='form-group'><label class='control-label'>State</label><select class='select2 m-b-10 select2-multiple' style='width: 100%' multiple='multiple' data-placeholder='Choose'><option value='AK'>Alaska</option><option value='HI'>Hawaii</option><option value='CA'>California</option></select></select></div></div>") 

我需要通过 JQuery 使其工作，因为将从 AJAX - MySQL 中提取数据。

谢谢！

CalendarApp.prototype.onSelect = function (start, end, allDay) {
    var $this = this;
        $this.$modal.modal({
            backdrop: 'static'
        });
        var form = $("<form></form>");
        form.append("<div class='row'></div>");
        form.find(".row")
            .append("<div class='col-md-6'><div><label>Student</label><input list='thestud' class='form-control' type='text' placeholder='Type Student' name='thestud'></div></div>")

            .append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Color</label><select class='form-control' name='colors'></select></div></div>") 

            .append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Notes</label><input class='form-control' placeholder='Type Notes' type='text' name='notes' required/></div></div>") 

            .append("<div class='col-md-6'><div class='form-group'><label class='control-label'>State</label><select class='select2 m-b-10 select2-multiple' style='width: 100%' multiple='multiple' data-placeholder='Choose'><option value='AK'>Alaska</option><option value='HI'>Hawaii</option><option value='CA'>California</option></select></select></div></div>") 

            .find("select[name='colors']")
            .append("<option value='bg-success'>Green</option>")
            .append("<option value='bg-danger'>Red</option>")
            .append("<option value='bg-purple'>Purple</option>")
            .append("<option value='bg-primary'>Pink</option>")
            .append("<option value='bg-pink'>Turquoise</option>")
            .append("<option value='bg-info'>Blue</option>")
            .append("<option value='bg-warning'>Orange</option></div></div>")
        $this.$modal.find('.delete-event').hide().end().find('.save-event').show().end().find('.modal-body').empty().prepend(form).end().find('.save-event').unbind('click').click(function () {
            form.submit();
        });
       

以下来自php

<div class="modal none-border" id="my-event">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title"><strong>Add Event</strong></h4>
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        </div>
                        <div class="modal-body">

                        </div>
                                    <label class='control-label'>State</label>
                                    <select class="select2 m-b-10 select2-multiple" style="width: 100%" multiple="multiple" data-placeholder="Choose">
                                    <option value="AK">Alaska</option>
                                    <option value="HI">Hawaii</option>
                                    <option value="CA">California</option>
                                </select>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-success save-event waves-effect waves-light">Create event</button>
                            <button type="button" class="btn btn-danger delete-event waves-effect waves-light" data-dismiss="modal">Delete</button>
                        </div>
                        
                    </div>
                </div>
            </div>

问题图片下方

Answer 1

我希望这是因为在您将包含<select 的 HTML 附加到您的页面之前，已经执行了将 <select 转换为 select2 对象的 jQuery 代码。因此，它没有找到任何可以附加 select2 功能的元素。

我对 select2 并不特别熟悉，但这遵循了您如何使用 DOM 的一般模式 - 如果您尝试使用 JavaScript 对元素执行某些操作，那么从逻辑上讲，该元素必须在您执行之前存在.

因此，请确保在将目标 <select 元素添加到 DOM 之后运行 select2 初始化代码。

（当你使用PHP时它起作用的原因当然是因为PHP在服务器上生成HTML并将其提供给浏览器，所以<select将在select2初始化代码有机会运行之前存在.)