Построение динамически созданного Clickable Divs JQuery Ajax

Мне нужна помощь jQuery ajax. В настоящее время у меня есть основной контент div, который заполняется ajax-вызовом XML-файла. Файл XML генерируется из результирующего набора БД. Это все работает нормально. Вызов ajax запускается нажатием кнопки, но я хочу это изменить.

У меня есть другой div, который я заполнил списком названий. Я хочу, чтобы при щелчке по названию основной контент div должен обновляться данными, относящимися к этому заголовку. Мне было интересно, что будет лучшим способом сделать это. Должен ли я создать интерактивный div, который делает вызов ajax? и если да, то как мне определить, какой div был нажат в коде для основного содержимого div. Я надеюсь, что это имеет смысл...... вот мой код для заполненного списка

$(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);
        });
    });
});

1 ответ

Решение

Хорошо, для получения списка интерактивных элементов div, загруженных из xml, посмотрите демонстрационную версию. Демо

Вот код:

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();
});
Другие вопросы по тегам