Execute JavaScript function with externally loaded link

Question

Hi, I'll admit the title is a bit confusing but it was hard to come up with a better one.

Ok, so What I have is 3 pages, first is the main page that the user loads up and the other 2 are ones that are going to be loaded into the main page with jQuery.

Here is the JavaScript code on the first page:

$(document).ready(function(){

$("#mainWrap").css({ width:"300px", height:"200px" });

$("#mainWrap").load("modules/web/loginForm.php");

$('[name=loadRegisterForm]').click(function() {
$("#mainWrap").load("modules/web/registerForm.php");
});

});

First of all it loads the login form into the page and then it listens for a link to be pressed which will then load up the register form in its place if it is pressed.

The link is in the login form that gets loaded, but unfortunately it doesn't work. What am I doing wrong?

I've tried placing the link on the main page with the JavaScript code and it does work, so is it just the fact that loading the link after the JavaScript has all ready been loaded going to leave it not working?

Answer 1

You need to have a callback function for the first load call. In side that call back is where you would set the click handler for the $('[name=loadRegisterForm]') element. Basically, you are binding a handler to an element that does not exist until the first load is complete.

$(document).ready(function(){
    $("#mainWrap").css({ width:"300px", height:"200px" });
    $("#mainWrap").load("modules/web/loginForm.php", null, onLoadComplete);
});

function onLoadComplete()
{
    $('[name=loadRegisterForm]').click(function() {
        $("#mainWrap").load("modules/web/registerForm.php");
    });
}