logo标签列表

JavaScript的onClick事件无法触发

javascript
5

我正在尝试使用Javascript控制网页表单。这是我所有的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()事件，因为我希望相同的代码可以适用于多种类型的内容，包括链接和可能的其他元素。

2
这不是使用jQuery绑定事件处理程序的正确方式。我建议查看http://api.jquery.com/category/events/。 - Felix Kling
我试过了，但它也没有起作用。如果你读了其他答案，我已经对它们添加了评论，但似乎都不起作用。 - legobear154
1
那么，你可能没有告诉我们某些信息（也许是页面上其他代码的问题），因为它可以正常工作：http://jsfiddle.net/RbzAR/。 - Felix Kling
1
我假设 pages/login.html 包含表单？目前你绑定事件处理程序时，元素尚不存在，因此无法绑定。在包含内容后绑定事件处理程序，或者使用事件委托。 - Felix Kling
1
@legobear154：看一下http://api.jquery.com/on/，*直接和委托事件*部分。在这个情境下也很有用的是：http://www.quirksmode.org/js/events_order.html。 - Felix Kling
显示剩余4条评论
7个回答
13
你试图在页面元素出现之前绑定事件处理程序。 要么通过传递回调函数给.load，在添加表单后绑定处理程序：after你添加表单，绑定处理程序。
$(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");
});
3

jQuery对象没有onClick方法。请使用.click。你的代码应该像这样:

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

Demo

3

注册处理程序的方法不正确，无法使用jQuery...

尝试使用：

$('#button').click(function(){
   console.log('test');
});
3

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

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

});
还是不行。控制台没有任何输出，我甚至尝试了alert，也没有任何反应。 - legobear154
2
将您的JS代码包装在document.ready函数中：$(document).ready(function() {...}); - David G
从一开始就这样做了，觉得在上面的代码中包含它并不重要。 - legobear154
是的，它是最后一个输入，类型为带有ID为button的按钮。 - legobear154
你所做的事情一定是其他的，因为你提供给我们的代码运行良好--http://jsfiddle.net/vQZCL/ - David G
@FelixKling 对我来说在Firefox中也不起作用...我会在第一篇帖子中更新所有的代码。 - legobear154
2
尝试使用.on。
$("#button").on('click', function(){
    console.log("Clicked");
});
之前的结果一样。控制台没有显示任何内容。我也没有收到任何错误信息。 - legobear154
2
你确定在为按钮分配onclick行为之前等待文档加载完成了吗？尝试将分配更改为在文档加载完成后进行。
$(document).ready(function(...))
我会等待文档加载完成。虽然我觉得将此内容添加到上面的代码中并不重要。 - legobear154
1

不是 onclick，而是 click

$("#button").click();
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接