花式框表单的问题答案

【问题标题】：Issue with fancybox form花式框表单的问题
【发布时间】：2017-10-28 20:17:47
【问题描述】：

来自here的参考见5.显示登录表单。

点击后立即尝试。

应该会打开一个带有名称和密码的精美盒子。
如果两个字段都是空白的，并且我单击登录，它应该会显示错误消息。
如果我输入名称和密码，它应该会在花式框中显示相同的内容。

对于我低于第 2 点和第 3 点的代码不起作用。我的代码有什么问题？

    <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>

【问题讨论】：

标签： jquery html fancybox fancybox-3

【解决方案1】：

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

【讨论】：

感谢您的回复，我试过 $("#login_form input[type='submit']").on("click", function() { 而不是 $("#login_form") .on("submit", function() { 但效果是一样的。如果可能的话请在你的最后尝试告诉我。
我尝试了您在 jsfiddle 中提到的上述代码，但单击提交按钮时没有任何反应。尝试的浏览器是 chrome 和 edge。还有为什么你没有在你用 jsfiddle 编写的代码中输入第一个脚本 ($("#tip5").fancybox({)