每次点击活动都有两个按钮。问题是当我单击button1时,button1事件中的警报消息正在显示。但是当我点击button1之后的button2时,button1中的警告仍然显示,反之亦然,如果我先点击button2然后按钮1,则按钮2中的警报显示。除了click()和return()之外的标题,内容和其他工作正常。谢谢你的帮助
编辑:我认为这个问题与函数底部的unset()有关。我尝试了不同的设置,例如settings.click = undefined / null,并且上一个按钮的警报不再显示,但之后,不再显示任何警报。
$(document).ready(function() {
$('#button1').click(function() {
popup_box({
title: "Message 1",
content: "Message 1"
}, {
submit: "Edit",
click: function() {
alert("Message 1");
}
});
});
$('#button2').click(function() {
popup_box({
title: "Message 2",
content: "Message 2"
}, {
submit: "Edit",
click: function() {
alert("Message 2");
}
});
});
function popup_box(options, settings) {
var options_defaults = {
title: "Popup title",
content: "Popup content",
footer: false
}
var settings_defaults = {
id: false,
submit: false,
cancel: false,
width: false,
click: false,
return: false,
headerColor: "darkgreen"
}
var options = $.extend(options_defaults, options);
var settings = $.extend(settings_defaults, settings);
var popup_container = $('#popupBox');
var popup_header = popup_container.find('.modal-header');
var popup_title = popup_container.find('#popupTitle');
var popup_content = popup_container.find('#popupContent');
var popup_footer = popup_container.find('#popupFooter');
var popup_submit = popup_container.find('.btn-primary');
var popup_cancel = popup_container.find('.btn-secondary');
popup_header.css("background-color", settings.headerColor);
popup_title.html(options.title);
popup_content.html(options.content);
if (settings.footer != false) popup_footer.html(options.footer);
if (settings.submit != false) popup_submit.html(settings.submit);
else popup_submit.html("Submit");
if (settings.cancel != false) popup_cancel.html(settings.cancel).removeClass("hidden");
else popup_cancel.addClass("hidden");
if (settings.width != false) popup_container.find('.modal-dialog').css("max-width", settings.width);
else popup_container.find('.modal-dialog').css("max-width", '');
popup_container.modal('show');
popup_submit.click(function() {
if (typeof settings.click == 'function') settings.click();
if (settings.id != false) settings.id.submit();
popup_container.modal('hide');
});
popup_container.on('hidden.bs.modal', function() {
if (typeof settings.return == 'function') settings.return();
popup_title.empty();
popup_content.empty();
popup_footer.empty();
unset(settings.id);
unset(settings.submit);
unset(settings.cancel);
unset(settings.width);
unset(settings.click);
unset(settings.return);
unset(settings.headerColor);
unset(options);
unset(settings);
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" id="button1" class="btn btn-default">Button 1</button>
<button type="submit" id="button2" class="btn btn-default">Button 2</button>
<div class="modal" id="popupBox" tabindex="-1" role="dialog" aria-labelledby="popupTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"">
<span class="glyphicon glyphicon-remove c-white" aria-hidden="true"></span>
</button>
<h5 class="modal-title" id="popupTitle">Popup Title</h5>
</div>
<div class="modal-body" id="popupContent">
Popup content
</div>
<div class="modal-footer">
<div class="pull-left" id="popupFooter">Popup footer</div>
<button type="button" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>