5

我正在尝试使用 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() 事件，因为我希望相同的代码可以处理多种类型的事物，包括链接和可能的其他元素。

4

7 回答 7

12

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

通过将回调传递给添加表单后绑定处理程序.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");
});

或使用事件委托（参见文档中的直接和委托事件部分）：

$(document).on("click", "#button", function(){
    var pageTo = this.name;
    loadPage("pages/" + pageTo + ".html");
});
于 2012-09-01T18:00:38.093 回答
3

jQuery 对象没有onClick方法。使用.click. 您的代码应如下所示：

$("#button").click(function(){
    console.log("Clicked");
});

演示

于 2012-09-01T17:13:27.803 回答
3

这不是正确的方法，用 jquery 注册一个处理程序......

尝试

$('#button').click(function(){
   console.log('test');
});
于 2012-09-01T17:13:29.120 回答
3

$("#button")返回一个没有onclick属性/方法的 jQuery 对象。使用.click：

$('#button').click(function() {

});
于 2012-09-01T17:13:55.087 回答
2

尝试.on

$("#button").on('click', function(){
    console.log("Clicked");
});
于 2012-09-01T17:13:18.773 回答
2

您确定在将 onclick 行为分配给按钮之前等待加载文档吗？尝试将作业更改为 inside

$(document).ready(function(...))
于 2012-09-01T17:15:18.997 回答
1

这不是onclick它click

$("#button").click();
于 2012-09-01T17:13:34.543 回答