Javascript不適用於jquery的load（），prepend（）或append（）函數添加的元素

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綁定。 您可以使用此處所述的實時方法綁定事件。

第二種解決方案，可能是更有效的解決方案，將使用delegate方法來處理現有容器的事件並將它們委托給該容器內的元素。 您可以在此處閱讀有關委托的更多信息。

使用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()函數為你的按鈕類型設置全局處理程序on()在1.7中替換為on() ）

3）在標記中定義按鈕處理程序

您選擇哪一個取決於您的具體任務。