Javascript onClick 事件未触发

Question

我正在尝试使用 Javascript 来控制 Web 表单。这是我所有的 Javascript 代码以及我想要实现的目标。

$(document).ready(function(){
    function loadPage(url){
        $(".body").fadeOut(400, function(){
            $(".body").load(url);
            $(".body").fadeIn(400);
        });
    }
    loadPage("pages/login.html");

    $("#button").on("click", function(){
        var pageTo = this.name;
        loadPage("pages/" + pageTo + ".html");
    });
});

代码稍后会做更复杂的事情，但它甚至不会运行上面的代码。

我的表格看起来像这样

<FORM>
    <SPAN class='header'>Login</SPAN><BR/>
    <LABEL for='username' class='loginLabel'>Username</LABEL>
    <INPUT type='text' id='username' name='username' value='' />
    <LABEL for='password'class='loginLabel'>Password</LABEL>
    <INPUT type='password' id='password' name='password' value='' />
    <INPUT type='hidden' name='process' value='login' />
    <INPUT type='button' value='Login' name='index' id='button' />
</FORM>

它是一个简单的登录表单，但单击按钮时文本不会显示在控制台中。我不想使用提交按钮和 JQuery .submit() 事件，因为我希望相同的代码可以处理多种类型的事物，包括链接和可能的其他元素。

Answer 1

您正在尝试在页面中存在元素之前绑定(bind)事件处理程序。

要么绑定(bind)处理程序之后 您通过将回调传递给 .load 添加了表单:

$(document).ready(function(){
    function loadPage(url){
        $(".body").fadeOut(400, function(){
            $(".body").load(url, function() {
                $("#button").on("click", function(){
                    var pageTo = this.name;
                    loadPage("pages/" + pageTo + ".html");
                });
            });
            $(".body").fadeIn(400);
        });
    }
    loadPage("pages/login.html");
});

或使用事件委托(delegate)(参见 documentation 中的直接和委托(delegate)事件部分):

$(document).on("click", "#button", function(){
    var pageTo = this.name;
    loadPage("pages/" + pageTo + ".html");
});