Question

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

示例链接Sample

<div class="major">
    <button class='btn btn-danger btn-xs' type="submit" name="additem" value="Add"><span class="fa fa-times"></span> add</button>
    <ul id="itemlist" data="0">
    </ul>
</div>
<div class="major">
    <button class='btn btn-danger btn-xs' type="submit" name="additem" value="Add"><span class="fa fa-times"></span> add</button>
    <ul id="itemlist" data="100">
    </ul>
</div>

<!-- Modal -->
<div id="confirm" class="modal hide fade">
    <div class="modal-body">
    Are you sure?
    </div>
    <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-primary" id="add">Add</button>
        <button type="button" data-dismiss="modal" class="btn">Cancel</button>
    </div>
</div>

脚本，

$('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");
});

Answer 1

以下是问题：

＆＃34;添加项目＆＃34; 的功能所有代码都在Add Item的函数内部，因此每当调用add按钮显示模态框时，模态框的ADD按钮的代码也在执行..

Jquery .one（）
它只会执行一次，所以我已将其替换为on，每次点击都会执行＆＃34; Modal的添加按钮＆＃34;

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

更新的小提琴可在以下位置找到：http://jsfiddle.net/L3ddq/732/

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);
});

如何在bootstrap模式中防止多个触发器？

1 个答案: