单击jQuery对话框中的按钮时出错

Question

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

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版本：

Answer 1

您绑定到document.ready上尚不存在的按钮。

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

更新：

根据Jquery-ui文档， 对话框按钮选项采用以下两种格式之一：

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()的事件委托，因为执行代码时按钮不存在。

例如，更改：

$('#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示例

理想情况下，您希望绑定到页面上比document更近的元素，以提高性能。

Answer 3

您甚至需要在创建对话框之后绑定单击处理程序，还需要告知单击功能。 我认为发生这种情况是因为Jquery尝试通过应用本机js函数执行属性单击，并且，如果您未定义它，则js尝试在未定义的情况下执行apply。

因此，我建议您定义一个空函数（或jQuery.noop）：

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