Dynamically creating a link that will load a page using .load

Dynamically creating a link that will load a page using .load

I am trying to dynamically load a page with data of links. I put an id on my links. When the link is clicked, I need to use jQuery to load another page into my existing page. My page is loaded and seems to be correct, but the jQuery clilck method is not working after my page loads with my dynamic links. Can someone show me what I am doing wrong?

It is a lot of javascript and here is a snippet of it.

// HTML page

  1. <div id="mainContent">
        <div id="inputRequirements">
        </div>
    </div>

// jQuery that runs on page rendering where I create my dynamic link.
// This is inside a loop that creates many links.

  1. $("#inputRequirements").append("<li id='a" + count.toString() + "'><a href='" + val.Url + "' title='" + val.PopupText + "'>" + val.LinkName + "</a></li>");

// The Output from the javascript above that gets appended to my div looks like this:

  1. "<li id='a1'><a href='5.011.html' title='SW Development Plan to follow'>SW Development Plan</a></li>"

// jQuery that I want to load a page when the link above is clicked on (which I will eventually need to create
// dynamically, but I have it hard coded in my page at the moment).


// *************  This is the part that does not work  *********************

  1. $("#a1").click(function () {
        $("#mainContent").load("views/levelthree/5.011.html");
        return false;
    });

I've confirmed that the code does work by hard-coding it to the div's id from the HTML above.

  1. $("#inputRequirements").click(function () {
        $("#mainContent").load("views/levelthree/5.011.html");
        return false;
    });