Question

我有一个q-tip，我正在应用Select2。我在表格的每一行都有一个q-tip，长度各不相同。通过ajax调用加载q-tip和select2的内容。以下是通过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定义Uncaught查询功能。

这是我的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：此方法不起作用，请参阅解决方案的注释。

加载Select2问题

1 个答案: