Question

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

不确定我的问题是否清楚，但这是我的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();
    });
  });
});

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

Answer 1

使用jQuery live()（已弃用，请参阅on()）函数

Answer 2

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

第二种解决方案，可能是更有效的方法，将使用delegate方法处理现有容器的事件并将它们委托给该容器内的元素。您可以阅读有关委托here的更多信息。

使用live方法的示例解决方案如下，假设您的响应数据中包含“回复”类的按钮：

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

Answer 3

这个

的方法很少

1）在AJAX成功

上显式初始化返回HTML内的按钮

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

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

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

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

3 个答案: