Select2 取消选择时出错
我使用 select2 和
multiple
select
元素来创建一个更简单的用户界面，用于将许多项目添加到选择中。一切功能正常 - 我可以创建选择器、添加项目和删除项目，但是，查看我的 Javascript 控制台日志时，我在取消选择项目时收到两个不同的错误。
-
未捕获的 TypeError：无法读取未定义的属性“id”
-
未捕获的 TypeError：无法读取 null 的属性“query”
从我发现的情况来看，错误是这些行导致的：
$('#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>
经过进一步研究，我发现此错误是由于 select2 在取消选择事件后未及时加载选择元素，因此无法立即找到列出的属性。为了解决这个问题，我需要将
.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');
});
});
});
使用下面的方法对我有用，错误消失了：
$('.class').on('select2:select', function (e) {...});