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

Question

I have certain "pages" on my website that are sortable. They also auto update to a database.

After my li list is sorted, a php page is called that re-orders the "pages" and then I call .html(data) to change the order of the pages that are displayed on the page.

After doing this, however, my auto update functions in my javascript stop working.

There is a #form1 that works before the sort takes place and the .html(data) is called. Once it is called, the previous #form1 get's removed and re-added to the page. This is when it stops working.

Does anyone know the reasoning for this?

My update script

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

What stops working/stops being called

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

Probably a case of over-writing your elements that has handlers bound, in which case you need event delegation:

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