1

我有一个使用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.
        }
    }
});

这是示例（示例 1）它应该如何工作。（用户可以添加现有的标签“red”、“green”和“blue”。createSearchChoice-function 允许用户创建新标签。）在这个例子中，当检测到新标签时，在 .change() 事件中什么也不做。一切都按预期工作。

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

现在我的问题是：

  1. 为什么会发生表单提交？
  2. 我怎样才能防止这种行为？

我正在使用 select2 3.4.0 和 jQuery 2.0.2

4

1 回答 1

1

一种解释是，当确认函数停止执行更改事件时，浏览器继续其工作并运行表单提交处理程序，该处理程序在用户在选择新标签时按下回车时触发。通常 select2 会阻止此执行，但在这种情况下，它会被确认功能阻止。

现在，如果确认逻辑被移动到它自己的单独函数并从 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.
    }
}

这是此解决方案的示例。

其他解释和解决方案仍然非常感谢！

于 2013-07-01T19:44:46.543 回答