Question

我有以下页面：

<!doctype html>
<html lang="en" class="darkBlue">
<head>
</head>
<body>
    @RenderSection("Content")
    <div class="loading-mask" id="loading-mask" style="display: none;">
        <span>Authenticating ...</span>
    </div>
    <script type="text/javascript">
        (function() {
            document.getElementsByClassName('form')
                .addEventListener("submit", function () {
                    alert("hi");
                    document.getElementById("loading-mask").style.display = "block";
                }, false);
        })();
    </script>
</body>
</html>

和这个部分页面：

@{ Layout = "~/Views/Account/Layout.cshtml"; }  
@section content {
   <form action="/Account/Login" class="form" method="post">
      <button type="submit" class="glossy">Login</button>
   </form>
}

我希望在按下提交时加载掩码div变为可见。然而，这似乎并没有发生。这可能是因为我的部分尚未加载？任何人都可以给我一些建议，我可以做这项工作吗？

Answer 1

尝试使用

document.getElementsByClassName('form')[0]

而不是

document.getElementsByClassName('form')

这是因为getElementsByClassName会返回一个HTMLCollection对象而不是Element对象，就像document.getElementById一样。

当作为部分页面的一部分加载时，如何向表单添加事件监听器？

1 个答案: