Javascript不适用于jquery的load（），prepend（）或append（）函数添加的元素

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?

我有一个评论系统，用户提交评论，处理评论，然后返回评论的HTML。然后jquery将检索到的HTML添加到注释系统。整个系统工作，但除非我刷新页面，否则需要javascript的注释按钮不起作用。如何使我的javascript在通过加载，前置或附加添加的元素上工作？

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

不确定我的问题是否清楚，但这是我的javascript：

$(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.

然后，我有每个注释的“回复”元素，这些注释在外部javascript中具有不起作用的功能，除非我刷新页面。希望这是有道理的。

3 个解决方案

#1

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

使用jQuery live（）（不推荐使用，参见on（））函数

#2

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.

jQuery有一个实时方法，允许在加载后添加到页面上的元素能够使事件已经被jQuery绑定。您可以使用此处所述的实时方法绑定事件。

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();
  });

#3

There are few different approaches to this

对此有几种不同的方法

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

1）在AJAX成功时显式初始化返回HTML内的按钮

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

2）使用jQuery live（）函数为你的按钮类型设置全局处理程序（在1.7中替换为on（））

3) define button handler right in the markup

3）在标记中定义按钮处理程序

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

您选择哪一个取决于您的具体任务。

#1