building dynamically created Clickable Divs JQuery Ajax
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 wi开发者_开发问答sh 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);
});
});
});
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();
});
精彩评论