CODEWITHSUNDEEP
javascriptajax
Jonathan Ong
Jonathan Ong

Reputation: 20345

Javascript doesn't work on elements added by jquery's load(), prepend(), or append() functions

I have a comment system where a user submits a comment, the comment is processed, then the HTML for the comment is returned. jquery then adds that retrieved HTML to the comment system. that whole system works, but the comment buttons that requir javascript do not work unless I refresh the page. How do make my javascript work on elements added through load, prepend, or append?

Not sure if my question is clear, but here's the javascript I have:

$(function () {
  $(".replyform").submit( function (event) {
    event.preventDefault();
    id = $(this).attr("id").split('_')[1];
    text = $('textarea#text_'+id).val();
    $.post( "/api/add/comment/", {_csrf: _csrf, id: id, text: text, a: a},
      function (data) {
        $('#commentreplies_'+id).prepend(data);
        $('#replyform_' + id).hide();
    });
  });
});

I then have elements such as "reply" for each comment that have functions in an external javascript that do not work unless I refresh the page. Hopefully that made sense.

Upvotes: 4

Views: 2869

Answers (3)

melihcelik
melihcelik

Reputation: 4599

jQuery has a live method to allow elements that are added on the page after loading to be able to have events already bound by jQuery. You can bind your events using live method as described here.

A second solution, and probably a more efficient one, would be using delegate method to handle events by existing containers and delegating them to the elements inside that container. You can read more about delegate here.

An example solution using live method is as follows assuming you have buttons with class 'reply' in your response data:

  $(".reply").live('click', function(event) {
     event.preventDefault();
     id = $(this).attr("id").split('_')[1];
     text = $('textarea#text_'+id).val();
     // post won't work since url is missing, but that code remains the same.
     // Assuming you get a response like this
     // <div><input type="textarea" id="text2" /><input type="submit" id="reply_2" value="submitReply" class="reply" /></div>
     // And if you append this to your document
     var data = $('<div></div>').html('<input type="textarea" id="text2" /><input type="submit" id="reply_2" value="submitReply" class="reply" />');

     $('#commentreplies_'+id).prepend();
     $('#reply_' + id).hide();
  });

Upvotes: 3

Ilia G
Ilia G

Reputation: 10221

There are few different approaches to this

1) Explicitly init the button inside returned HTML on AJAX success

2) Setup global handler for your button type using jQuery live() function (replaced by on() in 1.7)

3) define button handler right in the markup

Which one do you pick is really up to your specific task.

Upvotes: 2

madhead
madhead

Reputation: 33501

Use jQuery live() (it is deprecated, see on()) function

Upvotes: 3

Related Questions