link doesn't work after jquery refresh a div

Question

I am trying to add a block user/unblock user on my social site. I can get it to block the user or unblock, but once the div with the link refreshes the link wont display the dialogs anymore, so basically the link becomes dead on refresh.

// Block user
$(document).ready(function() {

$('#bottomcontain').append('<div id="blockconfirm"></div><div id="unblockconfirm"></div><div id="blockmsg"></div>');

    sentTime = null;
function startTimer() {
    sentTime = window.setTimeout(function() { $("#blockmsg").dialog('close'); }, 3000);
}
$("#blockmsg").dialog({
    autoOpen: false,
    draggable: false,
    resizable: false,
    model: true,
    title: 'Block Settings Changed',
    open: function() {
        clearTimeout(sentTime);
        startTimer();
    },
    buttons: {
        "Ok": function() {
            $('#blockmsg').dialog('close');
        }
    }
});

$('#blockconfirm').dialog({
    autoOpen: false,
    draggable: false,
    resizable: false,
    modal: true,
    title: 'Block User',
    buttons: {
        "Yes": function() {
            $.ajax({
                type: 'POST',
                url: 'windows.php?method=blockuser',
                dataType: 'json',
                data: {
                    block_id: profile
                },
                success: function(data){
                    if(data.error == false){
                        $('#blockconfirm').dialog('close');
                        $('#blockarea').load('profile.php?uid=' + profile + ' #unblockuser');
                        $('#blockmsg').load('windows.php?method=blockmsg1').dialog('open');
                    }
                    if(data.error == true){
                        $('#blockerr').html('&nbsp;'+ data.msg).removeClass().addClass('ui-state-error').show(500);
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    $('#blockerr').removeClass().addClass('ui-state-error').text('There was an error.').show(500);
                }
            });
        return false;
        },
        "No": function() {
            $('#blockconfirm').dialog('close');
        }
    }
});

$('#unblockconfirm').dialog({
    autoOpen: false,
    draggable: false,
    resizable: false,
    modal: true,
    title: 'Unblock User',
    buttons: {
        "Yes": function() {
            $.ajax({
                type: 'POST',
                url: 'windows.php?method=unblockuser',
                dataType: 'json',
                data: {
                    block_id: profile
                },
                success: function(data){
                    if(data.error == false){
                        $('#unblockconfirm').dialog('close');
                        $('#blockarea').load('profile.php?uid=' + profile + ' #blockuser');
                        $('#blockmsg').load('windows.php?method=blockmsg2').dialog('open');
                    }
                    if(data.error == true){
                        $('#blockerr').html('&nbsp;'+ data.msg).removeClass().addClass('ui-state-error').show(500);
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    $('#blockerr').removeClass().addClass('ui-state-error').text('There was an error.').show(500);
                }
            });
        return false;
        },
        "No": function() {
            $('#unblockconfirm').dialog('close');
        }
    }
});

$('#blockuser').click(function() {
$('#blockconfirm').load('windows.php?method=blockconfirm').dialog('open');
return false;
});

$('#unblockuser').click(function() {
$('#unblockconfirm').load('windows.php?method=unblockconfirm').dialog('open');
return false;
});
});

Answer 1

You can try using jQuery live events or delegate. Both will work even if the contents of the DIV are updated.