ボタンをクリックした後に確認モーダルが表示され、このモーダルでは「キャンセル」と「追加」の2つのボタンがあります。 "追加"は、独自のアイテムリストにデータを費やし、正常に動作します。しかし、「キャンセル」をクリックして再びこのモーダルを表示すると、「追加」をクリックすると、アイテムリストが消費される時間は、前に「キャンセル」をクリックした回数に依存します。 .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");
});
:
更新フィドルはで見つけることができますか? –
はい、私はしました。コードの上に。おかげで – user2189138