jquery .click doesn't work

Question

I hope I'm not just making a stupid mistake, but For some reason, the following code doesn't work. The only thing that happens is it logs "ready" in the console, but not anything within the.click

Javascript:

var Photobooth = (function (){
var api = {};

var init = function(){
    form_ready();

};


var form_ready = function(){
    console.log("ready");
    $('#btn-signin').click(function(e){


        e.preventDefault();
        console.log('click');

        $.ajax({
                type: 'POST',
                url: "entertainment/photobooth/signin/action/",
                data:$(this).serialize(),
              success: function(){
                $(this).addClass("done");
              }
            });

    });
};



init();
return api;
})();

HTML:

<a id="btn-signin" href="##">SIGN IN </a>

THE SOLUTION: Normally, I put my JS code at the end of the document, before the closing body... In this case I had to put it in the beginning and forgot to put the document.ready, so it works now. Thanks

Answer 1

You need the document.ready wrapper:

var Photobooth = $(function (){...
  ....
  init();
  return api;
});

Answer 2

http://jsfiddle.net/NiceGuy4263/LchcF/2/

In my example you'll see that I wrapped you code in the jQuery ready function.

Answer 3

It does work for me. Try a demo here :

I assume your jQuery is not loaded before you use it.

Always use jQuery within

$(document).ready(function(){

});

Answer 4

I'm sure you are calling your code before <a> is created. Use jQuery's ready or move your code to bottom of the page.