jquery inside fancybox not working

Question

I am facing problems with jquery within fancybox. Basically I have a form rendered through ajax and its been loaded within fancybox. But the problem is, jquery doesn't work on the form loaded by fancybox :( but it works fine when i go to the actual form page.

I found a similar problem here http://groups.google.com/group/fancybox/browse_thread/thread/fe6f9cad7b42df79 where he says to use absolute referencing... I even tried that, but no luck.

Anybody of you have faced a similar problem?

here is my jquery code

$(document).ready(function() {
  $("input#user_username").click(function(e){
    alert("asaadasd");
  }); // this works fine when called through the form loaded in the page, but doesn't when the form is loaded within fancybox

  $("a#login-link, a#login-link2, a#signup-link, a#signup-link2").fancybox({
    'scrolling'   : 'no',
    'titleShow'   : false
  });

});

any help?

Answer 1

You should use .on() now (as live is deprecated)...

$(document).on("click", "input#user_username", function(e) {
    alert("asaadasd");
});

Answer 2

If your form is loaded via ajax, the click event will not be bound to it on document.ready since it's not present in the document at that time. Use live() instead. This binds the event to both present and future elements in the document.

$("input#user_username").live("click", function(e) {
    alert("asaadasd");
});