//對話框
//生成對話框
function createDialog(){
if ($("#dialog").length == 0){
var str = '<p class="modal fade" id="dialog" tabindex="-1" role="dialog">';
str += '<p class="modal-dialog">';
str += '<p class="modal-content">';
str += '<p class="modal-header">';
str += '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>';
str += '<h4 class="modal-title">對話框</h4>';
str += '</p>';
str += '<p class="modal-body"><p class="text-center"><i class="icon-spinner icon-spin"></i></p></p>';
str += '<p class="modal-footer">'
str += '<button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>';
str += '<button type="submit" class="btn btn-primary">確定</button>';
str += '</p>'
str += '</p>'
str += '</p>'
str += '</p>'
$(str).appendTo('body');
}
}
$('*[data-target="#dialog"]').click(function(){
createDialog();
$('#dialog').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var action = button.data('action');
var modal = $(this);
switch(action)
{
case 'add':
modal.find('.modal-dialog').addClass('modal-lg');
modal.find('.modal-title').text('添加用戶');
modal.find('.modal-body').html('這里是表單');
modal.find('.modal-footer button[type="submit"]').removeClass('btn-danger').addClass('btn-primary').text ('添加');
alert('1'); //測試
break;
}
});
//關(guān)閉對話框后清除modal中數(shù)據(jù)
$("#dialog").on("hidden.bs.modal", function() {
$(this).removeData("bs.modal");
});
})
HTML-Code
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#dialog" data-action="add">添加</button>
Wenn ich auf die Schaltfl?che ?Hinzufügen“ klicke, wird zuerst die Warnung (?1‘) ausgeführt, und dann wird ein Dialogfeld angezeigt. Nachdem ich das Dialogfeld geschlossen und dann auf ?Hinzufügen“ geklickt habe, wird die Warnung (‘1‘) ausgeführt zweimal, das hei?t, es hei?t, dass ich zwei Warnfelder erhalte, aber das modale Dialogfeld wird angezeigt, nachdem die Warnung ('1') abgeschlossen ist. Wenn Sie das Modal-Dialogfeld schlie?en und erneut auf die Schaltfl?che klicken, wird Alert('1') dreimal ausgeführt und so weiter.
Dann kann ich verstehen, dass der folgende Code je nach Anzahl der Klicks auf die Schaltfl?che mehrmals ausgeführt wird.
case 'add':
modal.find('.modal-dialog').addClass('modal-lg');
modal.find('.modal-title').text('添加用戶');
modal.find('.modal-body').html('這里是表單');
modal.find('.modal-footer button[type="submit"]').removeClass('btn-danger').addClass('btn-primary').text ('添加');
alert('1'); //測試
break;
Wie soll ich dieses Problem l?sen?
其實(shí)還可以這么解決,,我不是搞前端的,但是這種問題遇見過
第一種:把事件放到click事件外去定義
$('*[data-target="#dialog"]').click(function(){
createDialog();
})
$(document).on('show.bs.modal','#dialog', function (event) {
var button = $(event.relatedTarget);
var action = button.data('action');
var modal = $(this);
console.log(action);
switch(action)
{
case 'add':
modal.find('.modal-dialog').addClass('modal-lg');
modal.find('.modal-title').text('添加用戶');
modal.find('.modal-body').html('這里是表單');
modal.find('.modal-footer button[type="submit"]').removeClass('btn-danger').addClass('btn-primary').text ('添加');
alert('1'); //測試
break;
}
})
$(document).on("hidden.bs.modal","#dialog", function() {
$(this).removeData("bs.modal");
})
第二種: 先移除事件再綁定事件
$('*[data-target="#dialog"]').click(function(){
createDialog();
$('#dialog').off('show.bs.modal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var action = button.data('action');
var modal = $(this);
switch(action)
{
case 'add':
modal.find('.modal-dialog').addClass('modal-lg');
modal.find('.modal-title').text('添加用戶');
modal.find('.modal-body').html('這里是表單');
modal.find('.modal-footer button[type="submit"]').removeClass('btn-danger').addClass('btn-primary').text ('添加');
alert('1'); //測試
break;
}
});
//關(guān)閉對話框后清除modal中數(shù)據(jù)
$("#dialog").off("hidden.bs.modal").on("hidden.bs.modal", function() {
$(this).removeData("bs.modal");
});
})
一直搞不明白這個問題出現(xiàn)的原因,現(xiàn)在我的暴力解決辦法是當(dāng)關(guān)閉了對話框后remove()掉這個對話框,問題解決。
JS代碼
//對話框
//生成對話框
function createDialog(){
if ($("#dialog").length == 0){
var str = '<p class="modal fade" id="dialog" tabindex="-1" role="dialog">';
str += '<p class="modal-dialog">';
str += '<p class="modal-content">';
str += '<p class="modal-header">';
str += '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>';
str += '<h4 class="modal-title">對話框</h4>';
str += '</p>';
str += '<p class="modal-body"><p class="text-center"><i class="icon-spinner icon-spin"></i></p></p>';
str += '<p class="modal-footer">'
str += '<button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>';
str += '<button type="submit" class="btn btn-primary">確定</button>';
str += '</p>'
str += '</p>'
str += '</p>'
str += '</p>'
$(str).appendTo('body');
}
}
$('*[data-target="#dialog"]').click(function(){
createDialog();
$('#dialog').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var action = button.data('action');
var modal = $(this);
switch(action)
{
case 'add':
modal.find('.modal-dialog').addClass('modal-lg');
modal.find('.modal-title').text('添加用戶');
modal.find('.modal-body').html('這里是表單');
modal.find('.modal-footer button[type="submit"]').removeClass('btn-danger').addClass('btn-primary').text ('添加');
alert('1'); //測試
break;
}
});
//刪除對話框
$("#dialog").on("hidden.bs.modal", function() {
$(this).remove();
});
})