Question

我正在使用js和jquery。我有一个我正在研究的测试登录页面，似乎在登录按钮上遇到了问题。在Chrome中，我看到js文件正在加载，但是当您单击该按钮时，它只会刷新页面。如果输入错误的信息，它不会显示警报部分或摇动，如果输入正确的信息，它不会重定向到主页面。这是我的代码：

HTML：

<body>
    <div id="content">

        <section class="ui-widget ui-corner-all">
            <header class="ui-widget-header ui-corner-top">
                Test Login
            </header>

            <div class="ui-widget-content ui-corner-bottom">

                <p class="ui-state-error">Uername / Password Incorrect.</p>

                <form>
                    <div>
                        <label for="username">Username:</label>
                        <input id="username" type="text">
                    </div>

                    <div>
                        <label for="password">Password:</label>
                        <input id="password" type="password">
                    </div>

                    <div>
                        <input id="btnLogin" type="submit" value="Login">
                    </div>
                </form>
            </div>
        </section>
    </div>

    <div class="ui-widget-overlay" style"z-index: 1002;"> </div>

</body>

JS：

$(".ui-state-error").hide();

$("#btnLogin").button()

.bind ("click", function() {
    if($("#username").val() != "test" && $("#password").val() != "test") {
        $(".ui-state-error").show();
        $("#login section").effect("shake", 150);
    }
    else {
        document.location = 'index.html';
    }

    return false;
});

Answer 1

试试这个

$(function(){
    $("#btnLogin").button().bind ("click", function() {
        if($("#username").val() != "test" && $("#password").val() != "test") {
            $(".ui-state-error").show();
            $("#login section").effect("shake", 150);
        }
        else {
            document.location = 'index.html';
        }

        return false;
    });
});

Answer 2

检查一下： http://jsfiddle.net/Q5YeX/

我认为你没有引用正确的jquery UI lib，或者你的引用方式错误

JS按钮，绑定功能不起作用

2 个答案: