[英]jQueryUI Modal Refreshing Page on Close
In my jQueryUI modal, whenever I click on the buttons, the parent page refreshes, even when I have preventDefault()
or return false
. 在我的jQueryUI模态中,每当我单击按钮时,即使我具有preventDefault()
或return false
,父页面也会刷新。 Is this expected behavior? 这是预期的行为吗?
The HTML: HTML:
<li><a id="addFunds" class="no-close" href="#">Add Funds</a></li>
The modal: 模态:
<div id="addFundsModal" class="modal-hidden" title="Add Funds to Your Account">
<div class="leftBar">
<h3>Add Funds</h3>
//other stuff
<form>
//<fieldset>, etc.
<button class="modal-close btnBlue" href="#">Cancel</button>
<button class="add-funds btnGreen">Add Funds</button>
</form>
</div>
</div>
The jQuery: jQuery:
$('#loggedInDropdown').on('click', '#addFunds', function(e) {
e.preventDefault();
$('#addFundsModal').dialog({
modal: true,
dialogClass: 'no-close',
width: 500
});
});
$('.ui-dialog').on('click', '.modal-close', function(e) {
e.preventDefault();
$('#addFundsModal').dialog('close');
});
I'm also not sure about whether I should use dialog.close
or dialog.destroy
, but that is for another post, I suppose. 我也不确定应该使用dialog.close
还是dialog.destroy
,但是我想那是另一篇文章。
We usually attach the button behavior inside the .dialog
options: 我们通常将按钮行为附加在.dialog
选项内:
.dialog({
resizable: false,
height:240,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
Your issue is in the event delegation, i think your click event for cancel never gets executed because .ui-dialog
is created only the first time you click on the link so initially attaching the event to that class doesn't take any effect (as .ui-dialog
doesn't exist then) and with normal button behavior form submits, page refreshes. 您的问题在于事件委派,我认为您的取消点击事件永远不会执行,因为.ui-dialog
仅在您第一次单击链接时创建,因此最初将事件附加到该类不会产生任何效果(因为然后不存在.ui-dialog
),并且使用正常的按钮行为表单提交时,页面会刷新。
Try: 尝试:
$('#addFundsModal').on('click', '.modal-close', function (e) {
e.preventDefault();
$('#addFundsModal').dialog('close');
});
or apply it to the class (must better) 或将其应用于班级(必须更好)
$('.modal-hidden').on('click', '.modal-close', function (e) {
e.preventDefault();
$('#addFundsModal').dialog('close');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.