Unable to add events after AJAX load using jQuery

I have a web page on which I use jQuery's AJAX to load new elements into a div. This part of my page works fine.

I now want to add a similar event to these newly-added elements. To do this I planned to use jQuery's .live() method but nothing appears to happen.

So I initially start with this

<div id="change-agent-list" class="tooltip">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
</div>

Into .middle I asynchronously load markup that looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
</head>
<body>
    <form name="main" method="post" action="/ils/agent-selector/" id="main">
        <div>
            <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTQ1MTc3ODM4NGRkg9mLyLiGNVcP/ppO9C/IbwpxdwI=" />
        </div>
        <ul id="content_0_agentsUL">
            <li>
                <a href="/agent-details/?ag={BF505982-DF16-4D09-BFE4-2ADDCADCC8E4}" class="agent-name link">Agent 1</a>
            </li>
            <li>
                <a href="/agent-details/?ag={42F1AE01-59F4-43DE-98C7-A1F99DB3A33C}" class="agent-name link">Agent 2</a>
            </li>
            <li>
                <a href="/agent-details/?ag={B3139686-12DA-44A1-A597-E05E1DD08007}" class="agent-name link">Agent 3</a>
            </li>
        </ul>
        <div id="agent-details"></div>
    </form>
</body>
</html>

When the page initially loads I use this script - my intention is to add a click handler for each of the .agent-name elements that are asynchronously added later.

$j(document).ready(function () {
    $j(".agent-name").live("click", function() {
        var agentDetails = $j(".agent-details");
        var loadingContent = '<div id="ajax-load"><img src="/sitecore/__/_images/global/ajax-load.gif" alt="AJAX content loading" /></div>';

       agentDetails.show();

        agentDetails.empty().html(loadingContent);
        var modalURL = $j(".agent-name").attr("href");
        agentDetails.load(modalURL);*/

        return false;
    });
});

The problem is that no events are being bound to the .agent-name elements. I've tried replacing all the inner script with a simple alert() so that I can see if any events are being bound to the .agent-name elements, and I can't get this alert() to display.

So in other words, no events are being bound to my .agent-name elements.

Even if I move the agent-name class to the list elements and change the jQuery to simply

$j(".agent-name").live("click", function() {
    alert('1');
});

I still get nothing when I click on the elements.

Can anyone explain why, or how I fix this so that I can late-bind events to elements created in an AJAX callback?

Solution

I eventually solved this by using jQuery's on instead of "live".