加载 Select2 问题

Question

我有一个正在应用 Select2 的 q-tip。我在表格的每一行中都有一个长度不同的 q-tip。 q-tip 的内容与 select2 一起通过 ajax 调用加载。这是通过ajax加载的信息：

<script> 
$('.editCommType').select2();  
</script>

<div>
<select class="editCommType" style="width:170px;" name="typeoptions">
            <option <% If LogType = "Inhouse Project" Then response.Write("selected")     End if%> value=2> Inhouse Project </option>
            <option <% If LogType = "Non-Picking Hours" Then response.Write("selected") End if%> value=4> Non-Picking Hours </option>
            <option <% If LogType = "Other ($)" Then response.Write("selected") End if%> value=0> Other ($) </option>
        </select>
</div>

当我单击以显示第一个 q-tip 时，我的 select2 工作正常，没有任何错误。但是，在未应用 select2 之后我单击的任何其他 q-tips 都未应用，并且我收到一条错误消息，提示未为 Select2 s2id_autogen67 定义未捕获的查询函数。

这是我的 q-tip 功能：

    $(document).on('click', '.editComm', function(event) {
    var EmpKey = $(this).attr('EmpKey')
    var key = $(this).attr('key')
    var comm = $(this).attr('comm')
    var type = $(this).attr('type')
    var amount = $(this).attr('amount')
    $(this).qtip({
        overwrite:false,
        position: {
            effect: false,
            my: "top right",
            at: "bottom center",
            adjust:{x: 8}

        },
        style: {
            classes: 'qtip-shadow qtip-rounded',
            tip: {
                corner: 'top right', 
                mimic: 'top center',
                width: 15,
                height: 10
            }
        },
        content: {
            text: 'Loading...',
            ajax: {
                    url: '/peeps/ManagePeeps/AJAX/HRDashEdit.asp',
                    type: 'GET',
                    data: { 
                            key:$(this).attr('key'), 
                            FormType:9,
                            EmpKey:$(this).attr('EmpKey'),
                            comm:$(this).attr('comm'),
                            type:$(this).attr('type'),
                            amount:$(this).attr('amount'),
                            PayPeriod:$(this).attr('PayPeriod')
                    }



            }
        },show: {
            event: event.type,
            ready: true
        },
        hide:{
            event: 'unfocus'
        }
    }, event);
});

Answer 1

由于您的选择器是一个类，因此每次调用它时，它都会尝试将select2 应用于页面上具有该类的每个元素。当您尝试创建第二个select2 时，该函数会尝试在第一个选择上调用select2，这已经是select2，因此它会引发该错误。

由于select2 在创建元素后将select2-offscreen 类添加到元素中，因此您可以更改：

$('.editCommType').select2();

到

$('.editCommType:not(.select2-offscreen)').select2();

-Edit：此方法不起作用，请参阅 cmets 解决方案。