javascript - 模态 - JQuery - JS - FullCalendar 上的 Select2 问题
问题描述
我遇到了一个问题,如果我从 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">×</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>
问题图片下方
解决方案
我希望这是因为在您将包含 的 HTML 附加到您的页面之前,已经执行了将<select
转换为对象的 jQuery 代码。因此,它没有找到任何附加功能的元素。select2
<select
select2
我对 select2 并不特别熟悉,但这遵循了您如何使用 DOM 的一般模式 - 如果您尝试使用 JavaScript 对元素执行某些操作,那么从逻辑上讲,该元素必须在您执行之前存在。
因此,请确保在将目标元素添加到 DOM后select2
运行初始化代码。<select
(当你使用 PHP 时它起作用的原因当然是因为 PHP 在服务器上生成 HTML 并将其提供给浏览器,所以在<select
select2 初始化代码有机会运行之前就会存在。)
推荐阅读
- r - 使 HTML 页面(文本)适合 R 中的文本分析
- laravel-5 - 我怎样才能使内部加入方法而不是控制器?
- php - 组数据php中的组数组
- docker - 由于执行顺序,Gradle docker 无法构建图像
- r - R中一列中两个较高数字之间的差异
- html - 无法摆脱Edge中元素之间的1px透明线
- matlab - matlab中的二叉树期权定价图
- html - 提交后重定向到 script.googleusercontent.com 的错误 HTML 联系表单
- python - 如果在第二个 dicts 列表(在 python 中)中找不到 id,如何从列表中隔离 dicts?
- powershell - Powershell 2.0 - 调用 wmimethod 并在 gridview 中获取计算机名称