Javascript onClick 事件未触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12229758/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript onClick event not firing
提问by legobear154
I am trying to use Javascript to control a web form. Here is all my Javascript code and what I am trying to achieve added to it as well.
我正在尝试使用 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");
});
});
The code will do more complex things later on, but it doesn't even run the above.
代码稍后会做更复杂的事情，但它甚至不会运行上面的代码。
My form looks like this
我的表格看起来像这样
<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>
Its a simple login form, but the text does not show up in the console when the button is clicked. I don't want to use a submit button and the JQuery .submit() event because I want the same code to work with multiple types of things, including links and possibly other elements.
它是一个简单的登录表单，但单击按钮时，文本不会显示在控制台中。我不想使用提交按钮和 JQuery .submit() 事件，因为我希望相同的代码可以处理多种类型的事物，包括链接和可能的其他元素。
回答by Felix Kling
You are trying to bind the event handler before the element exists in the page.
您正在尝试在页面中存在元素之前绑定事件处理程序。
Either bind the handler afteryou added the form by passing a callback to .load:
通过将回调传递给以下方法，在添加表单后绑定处理程序.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");
});
or use event delegation (see section Direct and delegated eventsin the documentation):
或使用事件委托（请参阅文档中的直接和委托事件部分）：
$(document).on("click", "#button", function(){
var pageTo = this.name;
loadPage("pages/" + pageTo + ".html");
});
回答by 0x499602D2
$("#button")returns a jQuery object for which there is no onclickproperty/method. Use .click:
$("#button")返回一个没有onclick属性/方法的 jQuery 对象。使用.click：
$('#button').click(function() {
});
回答by Some Guy
回答by TheHe
that's not the right way, to register a handler with jquery...
这不是正确的方法，用 jquery 注册一个处理程序......
try
尝试
$('#button').click(function(){
console.log('test');
});
回答by Mihai Iorga
try with .on
尝试 .on
$("#button").on('click', function(){
console.log("Clicked");
});
回答by Gabe
It's not onclickit's click
不是onclick它是click
$("#button").click();
回答by TMan
Are you sure you're waiting for the document to be loaded before assigning the onclick behavior to your button? Try changing the assignment to be inside
在将点击行为分配给按钮之前，您确定要等待文档加载吗？尝试将分配更改为内部
$(document).ready(function(...))
