jQuery listener click not working

Question

So I have this code that should listen for a click on #button but it won't work, and is driving me crazy!

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
    $('#button').click(function() {
        alert('OK!');
    });
</script>

and the HTML:

<input id="button" type="button" value="OK" />

This is strange. Any help is welcome!

Solution 1

Write your code inside document.ready function

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
</script> 
<script type="text/javascript">
$(document).ready(function() {
    $('#button').click(function() {
        alert('OK!');
    });
});
</script>


 OR
<script type="text/javascript">
    function on_click() {
          alert("OK !!");
    }
    $(document).ready(function() { 
         $("#button").click(on_click);
    });
</script>

hope you get some idea from this

Solution 2

Here's what the code should look like:

<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
</script> 
<script type="text/javascript"> 
    // Now that jquery is include, place the code to wire up the button here
    $(function(){
        // Once the document.onload event fires, attach the click
        // event handler for the button
        $('#button').click(function() { 
            alert('OK!'); 
        });
    });
</script> 
<input id="button" type="button" value="OK" /> 

Here's the jquery documentation that relates to this: http://docs.jquery.com/How_jQuery_Works

Comments

[Axel Latvala]

can I apply this logic to a whole 'functions.js' file?

[Ujjwal Manandhar]

yeah you can apply that inside the js file too

[gcastro]

Up-voting this as it contains a better explanation of why the original code did not work and points to details on how $(function() {}); works.

[Axel Latvala]

Tried wrapping everything inside my functions document in $(document).ready(function() { FUNCTIONS etc }); Won't work.

[Ujjwal Manandhar]

dont wrap the function .. function are written outside the document.ready.. only your logic are written inside the ready .. i will update my code little bit

[Axel Latvala]

Okay thank you. I was hoping for something I could add to bulk code because I have quite a few listeners that stopped working recently so...

[Hackinet]

Just a little suggestion, .click(function)(){ won't fire on touch devices, for that, you could use .on('click', function () {

[Chris Pietschmann]

@Hackinet Actually .click(function(){ is just a short hand for .on('click', function() { so they will work exactly the same.