Xeditable 与 Select2 不起作用答案

【问题标题】：Xeditable with Select2 Doesn't WorkXeditable 与 Select2 不起作用
【发布时间】：2016-10-11 14:41:38
【问题描述】：

我有一个动态显示的可编辑字段。我想用select2来更新它。

 $(document).ajaxComplete(function () {

        $('.marketing_event_id').editable({
            emptytext: ".....",
            url: "ajax_xeditable_update.php?table=appointments",
            source: promo_codes,
            select2: {
                width: 200,
                placeholder: 'Select promotion code...',
                allowClear: true,
            }
        });


    });

//get the promo codes for the select2 box for xeditable. put it outside of ajaxcomplete so it doesn't keep firing off for every appt!

    var promo_codes = [];

    $.getJSON('ajax_get_json.php?what=location_promo_codes', function (data) {

        $.each(data, function (index) {
            promo_codes.push({
                id: data[index].value,
                text: data[index].text
            });
        });

    });

Select2 Box将所有JSON选项显示给用户，但选择选项并选择“复选标记”按钮以更新字段时，不会发生任何内容。我在 Chrome 中观看网络屏幕，Xeditable 字段的 URL 甚至没有触发。

这是我的 html 字段的样子：

 echo '<h5>Promotion Code: <a href="#" class="marketing_event_id appointment' . $result->id . '" data-name="marketing_event_id" data-type="select2" data-value="';  if(!empty($result->marketing_event_id)) { echo $result->marketing_event_id; } echo '" data-placement="right" data-original-title="Enter the appointment promo code." data-pk="'. $result->id . '">' . $result->promo_code .'</a></h5>

数据字段填充良好。我看不出有什么问题。

以下是用于填充 select2 的 getJSON 信息示例：

 [{"value":"663","text":"christmas2015"},{"value":"651","text":"web08"},{"value":"658","text":"paper0815"}]

如果需要，我很乐意提供更多代码。

谁能解释为什么在更新字段时 URL 没有触发？谢谢。

【问题讨论】：

标签： jquery jquery-select2 x-editable

【解决方案1】：

我想通了，但我不太明白为什么会这样。

我在可编辑区域添加了一行代码：

 $('.marketing_event_id').editable({
            emptytext: ".....",
            container: 'body',  <---- THIS IS WHAT I ADDED TO MAKE IT WORK!!!!
            url: "ajax_xeditable_update.php?table=appointments",
            source: promo_codes,
            select2: {
                width: 200,
                placeholder: 'Select promotion code...',
                allowClear: true,
            }
        });

【讨论】：