Question

参考here，参见5.显示登录表单。

点击后立即尝试。

应使用名称和密码打开一个精美的盒子。
如果两个字段都为空，我点击登录则应显示错误消息。
如果我输入名称和密码，它应该在fancybox中显示相同的内容。

对于我的第二和第三点以下的代码不起作用。我的代码出了什么问题？

    <html>
    <head>

        <link rel="stylesheet" type="text/css" href="fancybox-master/dist/jquery.fancybox.min.css">

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

        <script src="fancybox-master/dist/jquery.fancybox.min.js"></script>
        <script type = "text/javascript">
            $("#tip5").fancybox({
            'scrolling'     : 'no',
            'titleShow'     : false,
            'onClosed'      : function() {
                $("#login_error").hide();
            }
        });

        </script>

        <script>

        $("#login_form").on("submit", function() {

    if ($("#login_name").val().length < 1 || 
   $("#login_pass").val().length < 1) {
            $("#login_error").show();
            $.fancybox.resize();
            return false;
        }

        $.fancybox.showActivity();

        $.ajax({
            type        : "POST",
            cache   : false,
            url     : "/data/login.php",
            data        : $(this).serializeArray(),
            success: function(data) {
                $.fancybox(data);
            }
        });

        return false;
    });
            </script>

        </head>

        <body>

                <a data-fancybox id="tip5" title="Login"  href="#login_form">Try now</a>
                <div style="display:none">
                <form id="login_form" method="post" action="">
                    <p id="login_error">Please, enter data</p>
                <p>
                    <label for="login_name">Login: </label>
                    <input type="text" id="login_name"  name="login_name" size="30" />
                </p>
                <p>
                    <label for="login_pass">Password: </label>
                    <input type="password" id="login_pass" name="login_pass" size="30" />
                </p>
                <p>
                    <input type="submit" value="Login" />
                </p>
                <p>
                    <em>Leave empty so see resizing</em>
                </p>
        </form>
    </div>
        </body>
    </html>

Answer 1

试 $("#login_form input[type='submit']").on("click", function() { 代替 $("#login_form").on("submit", function() {

fancybox表格问题

1 个答案: