Problems with Dialog

Problems with Dialog


Hello all,
I have a problem I can't solve whith the use of the Dialog script
coupled with some AJAX.
I fill my webpage with an AJAX query, and for each elements I fill the
page with, I have the following HTML code:
<div class="comiteeIcons">
    <a href="{ComiteeLine.URL_SHOW_MEMBERS}"><img src="../images/
users.gif" alt="Modifier les membres" title="Modifier les membres" /></
a>
    <img src="../images/delete.png" class="deleteIcon" alt="Supprimer :
{ComiteeLine.COMITEE_NAME}" title="Supprimer :
{ComiteeLine.COMITEE_NAME}" />
    <div class="deleteBox" id="deleteComitee_{ComiteeLine.COMITEE_ID}"
title='Confirmation de suppression'>Supprimer :
{ComiteeLine.COMITEE_NAME}</div>
</div>
I want that when I click on the image with the deleteIcon class, a
modal dialog box (defined in the class deleteBox) shows to display a
confirmation.
As I use AJAX, I put the JS initialization code inside a live query
function, giving to me that code:
$(function() {
    $('.deleteBox').livequery(function() {
        $(this).dialog({
            bgiframe: true,
            resizable: false,
            height:140,
            modal: true,
            draggable: false,
            autoOpen: false,
            overlay: {
                backgroundColor: '#000',
                opacity: 0.5
            },
            buttons: {
                'Supprimer': function() {
                    $(this).dialog('close');
                    if (initForComitees)
                        deleteComitee($(this).attr("id"));
                    else
                        deleteComiteeMember();
                },
                'Annuler': function() {
                    $(this).dialog('close');
                }
            }
        });
    });
    $('.deleteIcon').livequery('click', function(event) {
$(this).parent().children('.deleteBox').dialog('open');
return false;
});
});
The problem I have is that when the AJAX query is over, the <div>
corresponding to the dialog boxes have disappeared!
So the click event fails because it can't find the correct id of the
box.
I found a solution by recreating the whole dialog in the click event
with something like that:
$(".deleteIcon").click(function() {
     var id = $(this).attr("id");
     $("<div title='Confirmation de suppression'>" + $(this).attr
("title") + "</div>").dialog({
        bgiframe: true,
        resizable: false,
        height:140,
        modal: true,
        draggable: false,
        autoOpen: false,
        overlay: {
            backgroundColor: '#000',
            opacity: 0.5
        },
        buttons: {
            'Supprimer': function() {
                $(this).dialog('close');
                if (initForComitees)
                    deleteComitee(id);
                else
                    deleteComiteeMember();
            },
            'Annuler': function() {
                $(this).dialog('close');
            }
        }
    }).dialog('open');
});
But as I will have to display some other boxes, that won't be an easy
solution.
Is there something I'm doing wrong?
Thanks in advance
Michael