在jQuery .html（）更新中，其他功能停止工作

Question

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

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

然而，执行此操作后，我的自动更新功能在我的javascript中停止工作。

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

有人知道这个的原因吗？

我的更新脚本<​​/ strong>

$("#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() {