Question

我有一个使用select2构建的标记系统，用户应该能够选择现有标记或添加新标记。我的代码的简化版本如下所示：

$('input').select2({
    tags: [
        {id:0, text:'red', status:'old'},
        {id:1, text:'green', status:'old'},
        {id:2, text:'blue', status:'old'}
    ],
    tokenSeparators: [","],
    createSearchChoice: function (term, data) {
        return {id: term, text: term, status: 'new'};
    }
}).change(function(e) {
    if (e.added && e.added.status == 'new') {
        if (confirm('Not found. Add?')) {
            // Add new tag to database.
        }
    }
});

以下是示例（example 1）它应该如何工作。（用户可以添加现有标签“red”，“green”和“blue”.createSearchChoice-function允许用户创建新标签。）在这个例子中，当检测到新标签时，.change（）-event中没有任何操作。一切都按预期工作。

但是，就像在上面的代码块中一样，当添加新标签时，我想确认用户是否真的想要添加新标签。问题是当我在括号中添加确认代码时检测到新标记，表单提交事件触发。以下是此行为的示例（example 2）。只是尝试添加不存在的标记。

现在我的问题是：

为什么要提交表单？
我该如何防止这种行为？

我正在使用select2 3.4.0和jQuery 2.0.2

Answer 1

一种解释是，当confirm-function停止执行change-event时，浏览器会继续执行它的工作并运行表单提交处理程序，当用户在选择新标记时按下enter键时会触发该处理程序。通常select2会阻止执行，但在这种情况下，它会被confirm-function阻止。

现在，如果确认逻辑被移动到它自己的独立函数并从setTimeout-function调用，则change-event正常执行而select2阻止表单提交。

$('input').select2({
    tags: [
        {id:0, text:'red', status:'old'},
        {id:1, text:'green', status:'old'},
        {id:2, text:'blue', status:'old'}
    ],
    tokenSeparators: [","],
    createSearchChoice: function (term, data) {
       return {id: term, text: term, status: 'new'};
    }
}).change(function(e) {
    if (e.added && e.added.status == 'new') {
        setTimeout(myConfirm,50);
    }
});

function myConfirm() {
    if (confirm('Not found. Add?')) {
        // Add new tag to database.
    }
}

以下是此解决方案的example。

其他解释和解决方案仍然受到高度赞赏！

为什么Select2更改事件触发表单提交？

1 个答案: