确认Enter键上的Jquery UI对话框提示 [英] Confirm Jquery UI Dialog Prompt on Enter Key

问题描述

我尝试了以下堆栈中建议的技巧，但没有运气:

I've tried the techniques suggested in the following stack answer to no luck:

在< Enter>

我的代码必须关闭了.登录时，我弹出一个免责声明，警告用户该站点内的信息属于机密信息.我希望继续，所有用户要做的就是按Enter键.这是我的原始代码(我已经包括了浏览器检查):

Something must be off with my code. On login, I have a disclaimer that pops up to warn the user that the information found within the site is confidential. I would like it so that to continue, all the user has to do is hit the enter key. Here is my original code (I've included a browser check):

  $("#loginForm").submit(function (e) {
    e.preventDefault();

    if ($.browser.msie) {
        $("#dialog-confirm")
        .dialog({
            resizable: false,
            height: 300,
            width: 550,
            modal: true,
            buttons: {
                "Continue": function (e) {
                    $("#loginForm").unbind('submit').submit(),
                    $(this).dialog("close"),
                    $("#loginForm").submit();
                    $("#btnLogin").click();
                },
                Cancel: function (e) {
                    e.preventDefault();
                    $(this).dialog("close");
                }
            }

        })
    }
    else {
        $("#dialog-browser")
        .dialog({
            resizable: false,
            height: 220,
            width: 480,
            modal: true,
            buttons: {
                "Close": function (e) {
                    e.preventDefault();
                    $(this).dialog("close");
                }
            }
        })
    };
});

现在这是我的带有keyup命令的代码:

Now here is my code with the keyup commands:

$("#loginForm").submit(function (e) {
    e.preventDefault();

    if ($.browser.msie) {
        $("#dialog-confirm")
        .dialog({
            resizable: false,
            height: 300,
            width: 550,
            modal: true,
            buttons: {
                "Continue": function (e) {
                    $("#loginForm").unbind('submit').submit(),
                    $(this).dialog("close"),
                    $("#loginForm").submit();
                    $("#btnLogin").click();
                },
                Cancel: function (e) {
                    e.preventDefault();
                    $(this).dialog("close");
                }
            },
  HERE>>>      open: function() { 
                $("#dialog-confirm").keypress(function(e) { 
                  if (e.keyCode == $.ui.keyCode.ENTER) { 
                    $("#loginForm").unbind('submit').submit(),
                    $(this).dialog("close"),
                    $("#loginForm").submit();
                    $("#btnLogin").click(); 
                  } 
                }); 
              } 
        })
    }
    else {
        $("#dialog-browser")
        .dialog({
            resizable: false,
            height: 220,
            width: 480,
            modal: true,
            buttons: {
                "Close": function (e) {
                    e.preventDefault();
                    $(this).dialog("close");
                }
            }
        })
    };
});

不幸的是，这对我不起作用，我无法为我的生活弄清楚为什么?如果有人能看到问题出在哪里，我将非常感谢！

This unfortunately is not working for me and I can't for the life of me figure out why? If anyone can see where the issue is, I'd be extremely grateful!

谢谢！

推荐答案

我在一天中的大部分时间都将其放在一边，然后重新进行了研究.我知道了！这是我的代码:

I put this aside for most of the day and just revisited it. I got it working! Here's my code:

$("#loginForm").submit(function (e) {
    e.preventDefault();

    if ($.browser.msie) {
        $("#dialog-confirm")
        .dialog({
            resizable: false,
            height: 300,
            width: 550,
            modal: true,
            buttons: {
                "Continue": {
                    text: "Continue",
                    id: "btnContinue",
                    click: function (e) {
                        $("#loginForm").unbind('submit').submit(),
                        $(this).dialog("close"),
                        $("#loginForm").submit();
                        $("#btnLogin").click();
                    }
                },
                Cancel: function (e) {
                    e.preventDefault();
                    $(this).dialog("close");
                }
            },
            open: function () {
                $(document).keydown(function (event) {
                    if (event.keyCode == 13) {
                        $("#btnContinue").click();
                    }
                });
            }
        })
    }

基本上，我为对话框中的按钮分配了一个ID值，而不是$(#dialog-confirm").keydown我使用了$(document).keydown.由于仅在对话框打开后才设置此功能，因此它不一定会影响页面的其余部分.在keydown函数的内部，我按了ID即可调出的继续按钮.

Essentially, I assigned the button in my dialog an ID value, and instead of $("#dialog-confirm").keydown I used $(document).keydown. Since the function is set only after the dialog opens, it won't necessarily affect the rest of my page. Inside of the keydown function, I have it hitting the continue button of which I call out by ID.

感谢大家的帮助.

这篇关于确认Enter键上的Jquery UI对话框提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！