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