Unable to execute functions on elements loaded with AJAX (jQuery)

Question

i am using .prepend() to load data after i POST a form with .ajax().

once the new elements are added, my functions won't work on them.

if i link the js file directly in the prepended data, the functions work, but when i POST, i starts multiplying the events.

i have a feeling it has something to do with binding, but i am not able to figure out exactly how to handle it.

any ideas?

thanks!

Answer 1

create a function that encapsulates the jEditable logic like so:

function initjEditable(){
    $('.review_edit').editable('edit_review.php', {
         indicator : 'Saving...',
         tooltip   : 'Click to edit...'
    });

    $('.review_edit_area').editable('edit_review.php', { 
         type      : 'textarea',
         cancel    : 'Cancel',
         submit    : 'OK',
         indicator : '<img src="/hrt/images/indicator.gif">',
         tooltip   : 'Click to edit...'
    });
}

then call that function from a couple of places. the first would be to make it a callback from the blurbs link's onclick .load statement like so:

$('#adminContainer').load('blurbs.php',function(){ initjEditable(); });

that will make sure it gets run the first time without being in the $(document).ready() function.

the second place would be in the success function of your .ajax call for adding the blurb. would look like this:

$.ajax({
    type: 'POST',
    url: "add_review.php",
    data: $(this).parent().serialize(),
    dataType: "html",
    success: function(data){
        $("#results").prepend(data);
        initjEditable();
        $('#addForm').reset();
        $('#add').hide('fast');
    }
});

i assume you'd need to do the same sort of thing with the loadBlurbs function when it is up and running too. that should keep everything running with the editable plugin without reloading the script 100 times.

did i make sense that time?