javascript $(document).ready() 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31946059/
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
$(document).ready() doesn't work
提问by Searene
This is the html code:
这是html代码：
<!doctype html>
<html>
<head>
<title>title</title>
<meta charset="utf-8">
<script src="vendor/jquery.js"></script>
<script>
$(document).ready($(".voice").click(function() {
alert("succeed");
}));
</script>
</head>
<body>
<div class="container">
<div class="voice-div">
<input type="text" class = "voice" />
</div>
</div>
</div><!-- close class="wrapper" -->
<!-- the support button on the top right -->
</body>
</html>
When I clicked the input, alertdidn't pop up. But when I put
当我点击 时input，alert没有弹出。但是当我把
<script>
$(document).ready($(".voice").click(function() {
alert("succeed");
}));
</script>
right before </body>, it worked. Why? If I want to put the script in the <head>...</head>part, how should I modify the code?
就在之前</body>，它起作用了。为什么？如果我想把脚本放在<head>...</head>零件中，我应该如何修改代码？
回答by War10ck
I don't think you can have an event declaration like that immediately embedded within a $(document).ready...block. Try changing your code to the following:
我不认为您可以将这样的事件声明立即嵌入到$(document).ready...块中。尝试将您的代码更改为以下内容：
$(document).ready(function () {
$(".voice").click(function() {
alert("succeed");
});
});
or shorthand as:
或简写为：
$(function () {
$(".voice").click(function() {
alert("succeed");
});
});
回答by Quentin
You have to pass readya function.
你必须传递ready一个函数。
You are passing it the return value of the call to .click(). Consequently, the attempt to bind the click handler happens immediately (and fails since the element isn't in the DOM yet) and the readyfunction ignores the value you pass to it (because that isn't a function).
您将调用的返回值传递给.click(). 因此，绑定单击处理程序的尝试立即发生（并且失败，因为该元素尚未在 DOM 中）并且该ready函数会忽略您传递给它的值（因为它不是一个函数）。
$(document).ready(
function () {
$(".voice").click(
function() {
alert("succeed");
}
);
}
);
But when I put right before
</body>, it worked.
但是当我之前提出的时候
</body>，它奏效了。
This is because the elements exist at that point. The ready event binding still fails, but the expression you passed the return value of successfully bound the click events first.
这是因为元素存在于该点。就绪事件绑定仍然失败，但是您传递的表达式成功绑定了单击事件的返回值。
回答by buer
The script is supposed to look like this:
该脚本应该如下所示：
$(document).ready(function() {
$(".voice").click(function() {
alert("succeed");
});
});
It's about adding callbacks, function 'objects'. What you were doing was actually calling the functions (clicking and then alerting) immediately on script load, and passing the results (if any) as arguments.
这是关于添加回调函数“对象”。您所做的实际上是在脚本加载时立即调用函数（单击然后发出警报），并将结果（如果有）作为参数传递。
回答by Dipen Shah
The reason is, you are not coding it the right way. Change the code to:
原因是，您没有以正确的方式对其进行编码。将代码更改为：
<script>
$(document).ready(function() {
$(".voice").click(function(){
alert("succeed");
});
});
</script>
In your code, you have put: $(".voice").clickinside ready as an argument,
that is why javascript executes it immediately not on document.ready so it will work after body tag but not before it.
在你的代码中，你已经把：$(".voice").clickinside ready 作为一个参数，这就是为什么 javascript 立即执行它而不是在 document.ready 上，所以它会在 body 标签之后而不是在它之前工作。
回答by Grzegorz P.
If you want to call this outside of ready function you can try something like this
如果你想在就绪函数之外调用它，你可以尝试这样的事情
$(document).on("click",".voice",function()
{
alert ('called');
}) ;
In this case you should still can use it after ajax request when you apply new elements with this class name after success of ajax.
在这种情况下，当您在 ajax 成功后应用具有此类名称的新元素时，您仍然可以在 ajax 请求后使用它。
回答by pebbo
<script>
$(document).ready(function() {
$(".voice").click(function() {
alert("succeed");
});
});
</script>
