複数の行を含むフォームがあり、各行にはリンク付きの削除ボタンがあります。これらのボタンにブートストラップ・モーダルを追加するためのリンクを徐々に強化したいと思います。だから私がやっているのは:クリックごとにクリックイベントが追加される
- ページ上のすべての削除ボタンの要素を取得します。
- 各ボタンをループします。
- ボタンごとに、「OK」がクリックされたときに呼び出されるURLを含め、どのボタンがクリックされたかに基づいてモーダルの属性を変更します。
モーダルがトリガされ、「OK」ボタンがクリックされるたびに、それに添付されたURLが前のものに追加されるという点を除いて、すべてが機能しています。
http://jsfiddle.net/bittersweetryan/9TpX8/(コンソールのオープンを持って、その後、何度もOK多くを削除ボタンをクリックしてください)
ここであなたが「OK」にダイアログを起動するたびに別のクリックハンドラをアタッチコード
//anonymous function to grab all delete buttons and turn into a modal
(function(){
var delBtn = $(".delete"),
$modal = $("#modal-delete");
if(!$modal.size()){
$modal = $('<div id="modal-delete" class="modal hide fade"><div class="modal-header"> <a href="#" class="close">×</a><h3>Confirm Delete</h3></div><div class="modal-body" id="modal-content"></div><div class="modal-footer"> <a href="#" id="okButton" class="btn danger">OK</a> <a href="#" id="cancelButton" class="btn secondary">Cancel</a> </div></div>').appendTo("body");
}
delBtn.each(function(){
var $button = $(this),
clickHandler,
href= $button.attr("href");
if(href){
clickHandler = function(){
console.log(href);
//return window.location=href;
};
}
else{
clickHandler = $button.click;
}
$button.attr("data-toggle","modal").
attr("data-target","#modal-delete");
$button.on("click",function(){
$modal.find("#okButton").on("click",function(){
clickHandler();
$modal.modal('hide');
}).
end().
find("#cancelButton").on("click",function(){
$modal.modal('hide');
}).
end().
find("#modal-content").html($button.attr("title"));
});
});
})();
ありがとう、私は1つの機能のAPIドキュメントを読む必要があります。その存在を知らなかった。 – bittersweetryan