在 jQuery .html() 更新时，其他功能停止工作

Question

我的网站上有某些可排序的“页面”。它们还会自动更新到数据库。

在我的li 列表排序后，会调用一个 php 页面来重新排序“页面”，然后我调用.html(data) 来更改页面上显示的页面顺序。

但是，在这样做之后，我的 javascript 中的自动更新功能停止工作。

有一个#form1 在排序发生之前工作并且.html(data) 被调用。一旦它被调用，之前的#form1 get 就会被删除并重新添加到页面中。这是它停止工作的时候。

有人知道原因吗？

我的更新脚本

$("#reportNav").sortable({
    stop : function(event, ui){
        var postData = $(this).sortable('serialize');
        var url = "saveOrder.php";
        $.ajax({
            type: "POST",
            url: url,
            data: postData,
            success: function(data) {  $('#reportContainer').html(data); },
            error: function(data) { $changesSaved.text("Could not re-order pages."); }
        });
    }
});

什么停止工作/停止被调用

var timeoutId;
$('#form1').on('input propertychange change', function() {
   clearTimeout(timeoutId);
    timeoutId = setTimeout(function() {
    // Runs 1 second (1000 ms) after the last change  
    $("#form1").submit();
   }, 1000);
 });

Answer 1

可能是覆盖绑定了处理程序的元素的情况，在这种情况下您需要事件委托：

$('#reportContainer').on('input propertychange change', '#form1', function() {