Question

当我单击“拒绝请求”时，我能够显示对话框，但对话框不会关闭，当我单击取消或确定时，我在控制台中看到错误。 “未捕获的TypeError：无法读取属性'apply'of undefined”

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的：

<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

Answer 1

你绑定了document.ready上尚不存在的按钮。

相反，你可以告诉对话框在创建按钮时触发什么回调。

更新

根据Jquery-ui文档，dialog buttons options被接受为以下两种格式之一：

1）对象：键是按钮标签，值是单击相关按钮时的回调。

2）数组：数组的每个元素必须是一个对象，用于定义要在按钮上设置的属性，属性和事件处理程序。

我更新了代码以反映这一点。

码

<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>

Answer 2

您需要使用.on()'s event delegation，因为代码执行时按钮不存在。

例如，更改：

$('#cancel-reject').click(function () {
    $("#reject-dialog").dialog('close');
    console.log('confirm');
});

为：

$(document).on('click','#cancel-reject', function () {
    $("#reject-dialog").dialog('close');
    console.log('confirm');
});

<强> jsFiddle example

理想情况下，您希望绑定到页面上已存在的元素，该元素比document更接近，以获得更好的性能。

Answer 3

您需要通知单击功能，即使您需要在创建对话框后绑定单击处理程序。我认为这是因为Jquery尝试执行属性click through apply native js function，如果你没有定义它，js尝试在undefined中执行apply。

所以，我建议你定义一个空函数（或jQuery.noop）：

"Confirm": {
    text: "OK",
    id: "confirm-reject",
    click: function(){} // or jQuery.noop()
}

在jquery对话框中单击按钮时出错

3 个答案:

更新