jquery problem with live

I have code like this:

$(".delete").live('click', function() {    
    var commentContainer = $(this).par开发者_C百科ent();
    var id = $(this).attr("id");            
    var string = 'id='+ id ;
    $.ajax({   
        url: "<?php echo site_url('messages/delete') ?>",
        type: "POST",
        data: string,
        cache: false,
        success: function(){
            commentContainer.slideUp('600', function() {$(this).remove();
                $('.messages').fadeOut('2000', function(){$(this).remove();
                    $('#messages').load("<?php echo site_url('messages/show') ?>", function(){
                        $(this).fadeIn('2000')
                    });
                }); 
            });             
        } 
    });
    return false;
});
$('.delete').confirm(
{
    msg: 'You are about to delete this message. Are you sure?<br>',
    buttons: {
    separator: ' - '
    }
});//message deleting    

When activated for the first time it is working (when I try to delete message, question is asked and if I say yes, message is deleted). When data again shown, when I click delete it is deleting message without asking. What is the problem?

It looks like you'll have to register the confirm plugin after every ajax load as it isn't using live internally.

Easiest way would be to move the code into its own function and call that inside the load callback and on page load.

function deleteConfirmSetup() {
   $('.delete').confirm(
   {
        msg: 'You are about to delete this message. Are you sure?<br>',
        buttons: {
            separator: ' - '
        }
    });//message deleting
}   

$(".delete").live('click', function() {    
    $.ajax({   
       url: "<?php echo site_url('messages/delete') ?>",
       type: "POST",
       data: string,
       cache: false,
       success: function(){
          commentContainer.slideUp('600', function() {$(this).remove();
             $('.messages').fadeOut('2000', function(){$(this).remove();
                $('#messages').load("<?php echo site_url('messages/show') ?>", function(){
                    $(this).fadeIn('2000');
                    deleteConfirmSetup(); // Add function call here
                });
            }); 
        });             
    } 
  });
  return false;
});
deleteConfirmSetup(); // Also call function here to setup initially

Clearly the "confirm" plugin doesn't operate with live and instead is using bind.

When the element is added, it doesn't have the confirmation bindings but does have the live ones, so it'll just delete.

You could attempt to re-call the confirm plugin in your success function after the new content is loaded, modify the plugin, do it yourself manually, or find a new plugin that's a bit better thought-out.

I haven't used the confirm plugin, but a slightly irritating hack to make this work as you want might be to do this:

var bindBackup = jQuery.fn.bind;
jQuery.fn.bind = jQuery.fn.live;

before you run .confirm(). Then just restore it afterwards:

jQuery.fn.bind = bindBackup;

I haven't tried it, but the live function doesn't implement bind in it's source, so I don't see a reason why it won't work.