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!

specifically, i am using jEditable to edit rows in a db, but when i insert a new row, then display it using .prepend(), jEditable no longer works on the elements. — Jason
– Jason, Commented Jun 5, 2010 at 0:58

nathan gonzalez · Accepted Answer · 2010-06-06 06:18:30Z

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?

edited Jun 6, 2010 at 6:18

answered Jun 5, 2010 at 0:58

nathan gonzalez

12k4 gold badges43 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jason Over a year ago

that does work, but i was hoping to avoid having the same JS in multiple files. for now i have created a separate .js file for this and linked it in both places. but a related issue is when i use .load() to bring a file into a DIV, my custom JS stops working as well unless i link directly within the external file. i think my issue is more of an overall theory problem. when i bring in external files or append new elements, they are not accessible from the page that called them in. is there a way to make the main page aware they exist? thanks again, jason

nathan gonzalez Over a year ago

i'm curious as to how your code is structured, as you shouldn't have to have another file to run the one line needed. when you do the .prepend, the next line (in the same file should be the initializer for jEditable. its not that the DOM doesn't see your new row, its that you ran your code against the original DOM, and because you didn't use something like .live() or event delegation.

Jason Over a year ago

nathan, thanks again. here is a temp link. if you click "blurbs", you can see it functioning as desired, but if i move all the JS into one file and link it only in index.php, basically nothing works. i am by no means a jquery master, but it seems like it "should" work. thanks for looking.

Jason Over a year ago

the JS files in question are all linked at the bottom of the source. the stuff at the top is irrelevant here. thanks.

nathan gonzalez Over a year ago

i get what you're saying, though i think we may have a bit of a communication breakdown, so i'll try to be very plain. you don't need to reload the hrt.jEditable.js each time the ajax call is run. you probably don't really even need that file, as its an extra http request. see my edited answer above for more detail.

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related