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

admin管理员组

文章数量:1333616

I have a ment system where a user submits a ment, the ment is processed, then the HTML for the ment is returned. jquery then adds that retrieved HTML to the ment system. that whole system works, but the ment 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/ment/", {_csrf: _csrf, id: id, text: text, a: a},
      function (data) {
        $('#mentreplies_'+id).prepend(data);
        $('#replyform_' + id).hide();
    });
  });
});

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

I have a ment system where a user submits a ment, the ment is processed, then the HTML for the ment is returned. jquery then adds that retrieved HTML to the ment system. that whole system works, but the ment 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/ment/", {_csrf: _csrf, id: id, text: text, a: a},
      function (data) {
        $('#mentreplies_'+id).prepend(data);
        $('#replyform_' + id).hide();
    });
  });
});

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

• javascript
• ajax

Share Improve this question Follow asked Nov 17, 2011 at 21:26 Jonathan OngJonathan Ong 20.4k1818 gold badges8282 silver badges118118 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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

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" />');

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

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.

本文标签：