Question

我正在尝试绑定一个按键（“enter”）来触发jQuery模态对象中的一个函数。在下面的代码中，我想要在检测到按键事件时触发$（this）.dialog（“login”）。但似乎我无法调用self.dialog（“登录”）。我看错了吗？

      $("#login-dialog").dialog({
        autoOpen: false,
        height: 250,
        width: 350,
        modal: true,
        open: function() {
            var self = $(this);
            $("#login-dialog").load("/accounts/login/", function() {
                $("#id_username").focus()
                .keypress(function(event) {
                    if (event.which == 13) {
                        event.preventDefault();
                        self.dialog("login");
                    }
                });
            });
        },

        buttons: {
            close: function() {
                $(this).dialog("close");
            },

            login: function() {
                $.ajax({
                    type: "POST",
                    url: "/accounts/login/",
                    data: $("#login-form").serialize(),
                    success: function(data) {
                        var errors = $(data).find("#login-error").val();
                        if (errors) {
                            $("#error-message").replaceWith("<p class='error'>" + "Your username and password didn't match" + "</p>");
                        } else {
                            window.location = "/builder";
                        }
                    }
                });
            }
        }
    });

Answer 1

我会将一个处理程序附加到登录表单的onsubmit事件。使用此处理程序，使用适当的字段值调用login函数（防止事件的默认值，因此表单实际上不会提交）。

现在，一个很好的副作用是在表单上按 ENTER 时，将调用该处理程序。这种方法也会降低一点，并使您的所有代码更加便携。

就个人而言，我使用一个插件，你只需将表单元素传递给它，它将使用所有表单属性和输入元素通过ajax发送它。

Answer 2

快速解决您的问题，在“按键”功能中使用以下代码

$("#login-dialog").dialog("option").buttons.login();

jQuery UI模式问题

2 个答案: