building dynamically created Clickable Divs JQuery Ajax

Question

I need some jQuery ajax help. I currently have a main content div that is populated by an ajax call to a XML file. The XML file is generated from a db resultset. This is all working fine. The ajax call is fired by a button click but I wish to change that.

I have another div which I have populated with a list of titles. What I wish to happen is when a title is clicked the main content div should be updated with data related to that title. I was wondering what would be the best way to do this. Should I create a clickable div that makes an ajax call? and if so how do I distinguish which div has been clicked in the code for the main content div. I hope this makes sense...... here is my code for the populated list

$(document).ready(function() {
    $("#getData").click(function() {
        var $title = "";
        $.get("phpAjaxMovieListingTotal.php", function(theXML) {
            $('row',theXML).each(function(i) {
                $title = $(this).find("Title").text();
            });
            $("#movieListingContentDiv").html($title);
        });
    });
});

Answer 1

Alright, for a list of clickable divs, loaded from the xml, look at the demo. The Demo

Here is the code:

function movieTitle_Clicked (title)
{
    alert("Movie title '"+title+"' clicked");
}
function GetMovies ()
{
    $.post("THEXML.php", function(data){

        $('row title',data).each(function(i){
            var title = $(this).text();
            $('#container').append('<div onClick="javascript:movieTitle_Clicked(\''+title+'\')">'+title+'</div>');
        });
    }, 'xml');
}
$(document).ready(function() {
      GetMovies();
});