Question

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="/jquery-2.1.0.min.js"></script>
        <title>Title!</title>
        <script type="text/javascript">
            var x = false;    
            function foo() {
                alert (x);  
                return true;
            }

            window.onload = function() {
                $('#my_form').attr('onsubmit', foo);
                $('a').click(function(e) {
                    x = true;
                    $('#my_form').submit();
                    return false;
                });
            }
        </script>
    </head>
    <body>
        <form id="my_form" action="">
            <input type="submit">
        </form>
        <a href="#">Click here!</a>
    </body>
</html>

＆＃39; a＆＃39; click函数将变量x设置为true，为什么在运行foo（）时它为false？

Answer 1

原始JS事件与jQuery事件的工作方式不同。不要混淆两者。

attr允许您提供函数作为第二个参数。这就是您的代码立即触发的原因。它只是将返回值赋给属性，例如onsubmit="true"

当你运行这行时，你当前的小提琴会激活foo处理程序：

$('#my_form').attr('onsubmit', foo)

你可能意味着像这样（或等价物），但它也不起作用：

$('#my_form').attr('onsubmit', "javascript:foo()");

这是jQuery的等价物：

var x = false;

function foo() {
    alert (x);  
    return true;
}

$(function() {
    $('#my_form').submit(foo);
    $('a').click(function(e) {
        x = true;
        $('#my_form').submit();
        return false;
    });
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/Lf8hhwvq/

我在上面使用的快捷方式DOM就绪处理程序$(function(){...});也充当了IIFE，因此您可以在其中移动相关代码：

$(function () {
    var x = false;

    function foo() {
        alert(x);
        return true;
    }
    $('#my_form').submit(foo);
    $('a').click(function (e) {
        x = true;
        $('#my_form').submit();
        return false;
    });
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/Lf8hhwvq/1/

Answer 2

此代码存在很多问题。首先，您将DOM API的旧部分与jQuery混合在一起。在你的情况下，我建议只是坚持jQuery。除其他外：

您应该将所有渲染阻止代码（包括更改DOM的代码）放在</body>代码之前，而不是<head>。根据JavaScript依赖项的大小，您的页面加载速度会非常慢。
不要使用window.load =，特别是如果jQuery有自己的$(document).ready()功能，可能会更好地满足您的需求。
如果要设置事件处理程序，请不要尝试使用attr函数进行设置。这是一种非常古老的方式，也是<问题的来源。请改用jQuery .on() function（jQuery等效于.addEventListener）。
如果可以避免，请不要使用全局变量。请将所有代码换成IIFE代替。

因此，您的代码变为：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title!</title>
</head>
<body>
    <form id="my_form" action="">
    <input type="submit">
    </form>
    <a href="#">Click here!</a>
    <script src="/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var x = false;

        function foo() {
            alert (x);  
            return true;
        }

        $('#my_form').on('submit', foo);
        $('a').on('click', function(e) {
            x = true;
            $('#my_form').submit();
            return false;
        });
    });
    </script>
</body>
</html>

Codepen：http://codepen.io/anon/pen/zvaOLR

全局变量的行为不清楚

2 个答案: