on jQuery .html() update, other functions stop working

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);
 });

score 3 · Accepted Answer · answered Nov 20 '13 at 15:34

3

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() {

answered Nov 20 '13 at 15:34

tymeJV

103,943
14
161
157

This seems to work! but now my `$("#form1").submit(function(event){` stops being called. – bryan Nov 20 '13 at 15:39
1

Same issue, change to the format above, `(container).on('submit', '#form1', function(e)` – tymeJV Nov 20 '13 at 15:40
Thank you @tymeJV this worked great!, except I had to do `function(event)` – bryan Nov 20 '13 at 15:45

on jQuery .html() update, other functions stop working

1 Answers1

Linked