[英]Error when clicking buttons in jquery dialog
I'm able to get the dialog to appear when I click "Reject Request", but the dialog won't close and I see an error in the console when I click Cancel or OK. 单击“拒绝请求”时,可以显示对话框,但是单击“取消”或“确定”时,对话框不会关闭,并且在控制台中看到错误。 "Uncaught TypeError: Cannot read property 'apply' of undefined"
“未捕获的TypeError:无法读取未定义的属性'apply'”
HTML: HTML:
<button id="btn-reject" class="btn btn-danger" type="submit" style="float: right;">Reject Request</button>
<div id='reject-dialog' title='Confirmation Required'>Reject Request?</div>
JQuery: JQuery的:
<script type="text/javascript">
$(document).ready(function () {
$("#reject-dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
"Confirm": {
text: "OK",
id: "confirm-reject"
},
"Cancel": {
text: "Cancel",
id: "cancel-reject"
}
}
});
$("#btn-reject").click(function (e) {
e.preventDefault();
$("#reject-dialog").dialog('open');
});
$('#cancel-reject').click(function () {
$("#reject-dialog").dialog('close');
console.log('confirm');
});
$('#confirm-reject').click(function () {
$("#reject-dialog").dialog('close');
console.log('reject');
});
}); //dom
</script>
JQuery versions: jQuery版本:
you are binding to buttons that don't exist yet on document.ready
. 您绑定到
document.ready
上尚不存在的按钮。
instead you can tell the dialog what callback to trigger while creating the buttons. 相反,您可以告诉对话框在创建按钮时触发什么回调。
according to the Jquery-ui documentation, dialog buttons options are accepted in one of the two following formats: 根据Jquery-ui文档, 对话框按钮选项采用以下两种格式之一:
1) Object: The keys are the button labels and the values are the callbacks for when the associated button is clicked. 1)对象:键是按钮标签,值是单击关联的按钮时的回调。
2) Array: Each element of the array must be an object defining the attributes, properties, and event handlers to set on the button. 2)数组:数组的每个元素都必须是一个对象,该对象定义要在按钮上设置的属性,属性和事件处理程序。
i updated the code to reflect that. 我更新了代码以反映这一点。
code 码
<script type="text/javascript">
$(document).ready(function () {
var dialogDiv = $("#reject-dialog");
dialogDiv.dialog({
autoOpen: false,
modal: true,
buttons: [
{
text: "OK",
id: "confirm-reject",
click: function() {
dialogDiv.dialog("close");
console.log('confirm');
}
},
{
text: "Cancel",
id: "cancel-reject",
click: function(){
dialogDiv.dialog("close");
console.log('reject');
}
}
]
});
$("#btn-reject").click(function (e) {
e.preventDefault();
dialogDiv.dialog('open');
});
}); //dom
</script>
You need to use .on()
's event delegation since the buttons don't exist when the code is executed. 您需要使用
.on()
的事件委托,因为执行代码时按钮不存在。
For example, change: 例如,更改:
$('#cancel-reject').click(function () {
$("#reject-dialog").dialog('close');
console.log('confirm');
});
to: 至:
$(document).on('click','#cancel-reject', function () {
$("#reject-dialog").dialog('close');
console.log('confirm');
});
Ideally you want to bind to an element that already exists on the page that's closer than document
for better performance. 理想情况下,您希望绑定到页面上比
document
更近的元素,以提高性能。
You need to inform a click function, even you need to bind a click handler after the create the dialog. 您甚至需要在创建对话框之后绑定单击处理程序,还需要告知单击功能。 I think this happens because Jquery tries to execute the attribute click through apply native js function and, if you don't define it, js try to execute apply in a undefined.
我认为发生这种情况是因为Jquery尝试通过应用本机js函数执行属性单击,并且,如果您未定义它,则js尝试在未定义的情况下执行apply。
So, I suggest that you define an empty function (or jQuery.noop): 因此,我建议您定义一个空函数(或jQuery.noop):
"Confirm": {
text: "OK",
id: "confirm-reject",
click: function(){} // or jQuery.noop()
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.