单击 jquery 对话框中的按钮时出错答案

【问题标题】：Error when clicking buttons in jquery dialog单击 jquery 对话框中的按钮时出错
【发布时间】：2014-04-16 15:41:03
【问题描述】：

当我单击“拒绝请求”时，我能够显示对话框，但对话框不会关闭，并且当我单击“取消”或“确定”时，我在控制台中看到错误。 “未捕获的类型错误：无法读取未定义的属性‘应用’”

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

【问题讨论】：

需要更多代码，因为您的代码中根本没有 apply 被调用，所以必须更多
但它看起来像任何其他脚本调用在任何地方应用 jquery 的函数并且 jquery 没有定义我认为它想在兼容模式下使用 jquery 并且它没有设置

标签： javascript jquery jquery-ui

【解决方案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>

【讨论】：

这消除了错误，我现在看到控制台记录消息（拒绝或确认），但对话框没有关闭。
嗯。现在它正在跳过 preventDefault 并提交表单。没有对话框打开。
哦，有道理。 preventDefault 现在正在触发，我看到与我单击的对话框按钮相关的控制台日志消息......但是那个该死的对话框没有关闭！另外，您能解释一下将对话 id 分配给 var 的方法吗？
你可以忽略 var 赋值，只是旧习惯。它允许您在不更改太多代码的情况下更改对话框 ID。
我没有收到任何错误，除了 CSS 中的样式之外我没有任何其他内容。会不会是jquery的版本？我将更新我的问题以显示我如何调用 jquery。

【解决方案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 更近的元素以获得更好的性能。

【讨论】：

我现在收到控制台日志消息，但对话框没有关闭，并且在控制台消息确认之前我仍然看到错误“Uncaught TypeError: Cannot read property 'apply' of undefined” 或拒绝。

【解决方案3】：

你需要通知一个点击函数，即使你需要在创建对话框之后绑定一个点击处理程序。我认为这是因为 Jquery 尝试通过 apply 本机 js 函数执行属性 click ，如果您不定义它，js 会尝试在未定义的情况下执行 apply。

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

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

【讨论】：