Question

Hi everyone I have been working on this particular problem for ages by now,plz help.
I have looked at jQuery: Refresh div after another jquery action?
and it does exactly what I want but only once! I have a table generated from db and when I click on delete it deletes the row and refreshes the div but after which none of my jquery functions will work.

$('#docs td.delete').click(function() {
    $("#docs tr.itemDetail").hide();
    var i = $(this).parent().attr('id');

    $.ajax({
        url: "<?php echo site_url('kt_docs/deleteDoc'); ?>",
        type: 'POST',
        data: 'id=' + i,
        success: function(data) {
            $("#docs tr.itemDetail").hide();
            $("#f1").html(data); //    wont work twice            
            //$("#docs").load(location.href+" #docs>*"); //works once as well
        }
    });
});

in my body I have

<fieldset class='step' id='f1'>
    <?php $this->load->view('profile/docs_table'); ?>
</fieldset>

profile/docs reads data from db. <table id='docs'>....</table>
and my controller:

function deleteDoc() {
    $id = $_POST['id'];
    $this->load->model('documents_model');
    $del = $this->documents_model->deleteDocument($id);    
    return $this->load->view('docs_table');
}

Thanks in advance!

Answer 1

Are you removing any expressions matching $(‘#docs td.delete’) anywhere? If so, consider using $.live(), which will attach your function to ALL matching elements regardless of current or in the future; e.g.

$('#docs td.delete').live('click', function() {
    // Do stuff.
});

http://api.jquery.com/live/