onClick模态对话框

Similar to: jquery modal dialog onclick?

However I have a different requirement and cannot apply the solutions provided in that post.

At the moment I am using JQuery within php to parse through an xml file and produce content on a HTML page:

<script type="text/javascript">
        $(document).ready(function(){
            $.ajax({
                type: "GET",
                url: "uploads/data.xml",
                dataType: "xml",
                error: function() {
                    $('#message').text('Please upload the XML file.');
                },
                success: xmlParser
            });
        });

        function xmlParser(xml){
            $('.tmpli').hide();


            $(xml).find("vendor-one").each(function(){
                $("#vendor-one").append('<li class="sweet">' + $(this).find("name").text() + '</li>');
                $(".sweet").fadeIn();
            });

        }
    </script>

I attempted an alert triggered by onClick however it's not able to contain images:

$(xml).find("vendor-one").each(function(){
    $("#vendor-one").append('<li class="sweet" onClick="alert(\''+$(this).find("name").text()+'\');">' + $(this).find("name").text() + '</li>');
    $(".sweet").fadeIn();
});

I then attempted this however it opens a dialog box for every li element on the page and I'm unsure how to edit the text and add an image:

$(xml).find("vendor-one").each(function(){
    $("#vendor-one").append('<li class="sweet">' + $(this).find("name").text() + '</li>');
    $(".sweet").fadeIn();
    $('li.sweet').click(function(){ $('li.sweet').dialog(); });
});

I need a facility where I am able to click on each individual li item created and have a message box appear that contains an image and text. I was intending to use this: Modal Dialog however I'm unsure of how to mend it to my needs.

How do you do this?

Instead of using the manual onclick inline option, you can use the Javascript way to do it.

document.getElementById('ElementID').addEventListener('click', function(event){
   console.log(event);
});

Or the JQuery way (which results in the same thing) :

$('#ElementID').click(function(event){
   console.log(event);
});