Question

我正在使用带有multiple select元素的select2来创建一个更简单的用户界面，用于向select添加许多项目。一切正常 - 我可以创建选择器，添加项目和删除项目，但是，在查看我的Javascript控制台日志时，我在取消选择项目时收到两个不同的错误。

未捕获的TypeError：无法读取属性＆＃39; id＆＃39;未定义的
未捕获的TypeError：无法读取属性＆＃39;查询＆＃39;为null

根据我的发现，错误是这些行的结果：

$('#eleId').on("select2:unselect", function(){
    $('#eleId').select2();
});

我删除了一些代码以尝试查明错误，但通常此代码块会更新元素的某些属性，在select2({...})调用中设置。在打开和关闭选项选择面板后第一次删除元素时会出现第一个错误，因此如果用户单击选择器，添加一个项目，然后删除该项目，则会触发第一个错误。第二个错误发生在选择面板打开和关闭后不立即删除元素时，因此如果用户要添加三个项目，删除第一个将产生第一个错误，删除第二个和第三个将产生第二个错误删除每个项目。

如果我删除了函数中的select2()调用，则错误会消失，但错误似乎是由unselect本身触发的，因为我在函数末尾添加了一个日志语句并且会在错误打印之前打印。

工作副本：

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    </head>
    <body>
        <select multiple id='eleId'>
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
    </body>
    <script>
        $(document).ready(function() {
            $('#eleId').select2();
        });
        $('#eleId').on("select2:unselect", function(){
            $('#eleId').select2();
        });
    </script>
</html>

Answer 1

在做了一些研究之后，我发现这个错误是由于select2在取消选择事件之后没有及时加载select元素引起的，所以它无法立即找到列出的属性。为了解决这个问题，我需要将.select2()调用包含在setTimeout()中：

$('#eleId').on("select2:unselect", function(){
    setTimeout(function(){
        $('#eleId').select2();
    });
});

这使select2在尝试访问此属性之前有足够的时间加载元素。虽然这样可以解决错误，但在删除选择时，它会在选择面板上产生闪烁效果。为了解决这个问题，我修改了在此期间处理opening事件的方式：

$('#eleId').on("select2:unselect", function(){
    $(this).on('select2:opening', function(e) {
        e.preventDefault();
    });
    setTimeout(function(){
        $('#eleId').select2();
    });
    $(this).on('select2:unselect', function() {
        var sel = $(this);
        setTimeout(function() {
            sel.off('select2:opening');
        });
    });
});

Answer 2

使用以下方法对我有用，错误消失了：

$('.class').on('select2:select', function (e) {...});

取消选择

2 个答案: