$(document).ready() doesn't work
Question
This is the html code:
<!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 , alert didn't pop up. But when I put
<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?
6 answers
solution1
15 ACCPTED 2015-08-11 15:35:04
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(function () {
$(".voice").click(function() {
alert("succeed");
});
});
or shorthand as:
$(function () {
$(".voice").click(function() {
alert("succeed");
});
});
solution2
11 2015-08-11 15:34:19
You have to pass ready a function .
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 ready function ignores the value you pass to it (because that isn't a function).
$(document).ready(
function () {
$(".voice").click(
function() {
alert("succeed");
}
);
}
);
But when I put right before
</body>, it worked.
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.
solution3
4 2015-08-11 15:38:26
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.
solution4
3 2015-08-11 15:36:52
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").click inside 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.
solution5
0 2015-09-15 04:56:15
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.
solution6
-2 2015-08-11 15:35:42
<script>
$(document).ready(function() {
$(".voice").click(function() {
alert("succeed");
});
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.