CODEWITHSUNDEEP
javascriptjqueryhtml
Searene
Searene

Reputation: 27544

$(document).ready() doesn't work

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?

Upvotes: 2

Views: 18498

Answers (6)

Grzegorz P.
Grzegorz P.

Reputation: 83

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.

Upvotes: 0

Quentin
Quentin

Reputation: 943142

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.

Upvotes: 11

buer
buer

Reputation: 330

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.

Upvotes: 4

Dipen Shah
Dipen Shah

Reputation: 26075

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.

Upvotes: 3

pebbo
pebbo

Reputation: 581

<script>
    $(document).ready(function() {
        $(".voice").click(function() {
            alert("succeed");
        });
    });
</script>

Upvotes: -2

War10ck
War10ck

Reputation: 12508

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");
    });
});

Upvotes: 16

Related Questions