Triggers 如何防止引导模式中的多触发器？

我有一个确认模式显示后，点击一个按钮，在这个模式有两个按钮，“取消”和“添加”。“添加”将把数据扩展到它自己的项目列表中，并且工作正常。但如果我单击“取消”，然后再次返回显示此模式，如果我单击“添加”，我的项目列表将花费多少次取决于我之前单击“取消”的次数。我尝试.data（“bs.modal”，null）或.off（“click”）在.on（“hidden.bs.modal”）。他们都不能解决我的问题

示例链接

添加


添加


你确定吗？
添加
取消

剧本

$('button[name="additem"]').on('click', function(e){
    var $major=$(this).closest('.major');
    e.preventDefault();
    $('#confirm').modal({ backdrop: 'static', keyboard: false })
    .one('click', '#add', function (e) {
        var num = parseInt($major.children("#itemlist").attr("data")) + 1;
        $major.children("#itemlist").append("<li>new item" + num + "</li>");
        $major.children("#itemlist").attr("data", num);
    });
});

$("#confirm").on("hidden.bs.modal", function(){
    $(this).data("bs.modal", null);
    $("#add").off("click");
});

$（'button[name=“additem”]'）。在（'click'，函数（e）{
var$major=$（this）.closest（'.major'）；
e、 预防默认值（）；
$（“#确认”）.modal（{背景：“静态”，键盘：false}）
.1（'点击'，'添加'，功能（e）{
var num=parseInt（$major.children（#itemlist”）.attr（“data”））+1；
$major.children（“#itemlist”）。追加（“
新项”+num+”
”；
$major.children（“#itemlist”）.attr（“data”，num）；
});
});
$（“#确认”）。在（“hidden.bs.modal”，function（）上{
$（this）.data（“bs.modal”，null）；
$（“添加”）。关闭（“单击”）；
});

以下是问题：

用于“添加项目”的功能
所有代码都在additems函数中，因此每当调用Add按钮来显示模态框时，模态框的Add按钮的代码也在执行

Jquery.one（）
它将只执行一次，因此我将其替换为每次单击“添加模态按钮”时都会执行的

我已经从函数中取出代码，并将其中一个替换为on，现在它工作正常

更新的小提琴可以在以下位置找到：

var$major；
$（'button[name=“additem”]'）。在（'click'，函数（e）{
$major=$（this.nexist（'.major'）；
e、 预防默认值（）；
$（'#confirm'）.modal（{background:'static'，键盘：false}）；
});
$（'确认'）。在（'单击'，'添加'）上，函数（e）{
var num=parseInt（$major.children（#itemlist”）.attr（“data”））+1；
$major.children（“#itemlist”）。追加（“
新项”+num+”
”；
$major.children（“#itemlist”）.attr（“data”，num）；
});

您能为该问题创建小提琴或弹琴吗？是的，我创建了。在代码的上方。非常感谢你。这是否意味着.one（）会在没有人单击它时执行“#添加”？不会，.one只会在第一次单击时执行“#添加”，然后在随后的单击时不会执行#添加

$('button[name="additem"]').on('click', function(e){
    var $major=$(this).closest('.major');
    e.preventDefault();
    $('#confirm').modal({ backdrop: 'static', keyboard: false })
    .one('click', '#add', function (e) {
        var num = parseInt($major.children("#itemlist").attr("data")) + 1;
        $major.children("#itemlist").append("<li>new item" + num + "</li>");
        $major.children("#itemlist").attr("data", num);
    });
});

$("#confirm").on("hidden.bs.modal", function(){
    $(this).data("bs.modal", null);
    $("#add").off("click");
});

var $major ;
$('button[name="additem"]').on('click', function(e){
    $major=$(this).closest('.major');
    e.preventDefault();
    $('#confirm').modal({ backdrop: 'static', keyboard: false });
});

$('#confirm').on('click', '#add', function (e) {
  var num = parseInt($major.children("#itemlist").attr("data")) + 1;
  $major.children("#itemlist").append("<li>new item" + num + "</li>");
  $major.children("#itemlist").attr("data", num);
});