Javascript breaks after div refresh

Question

У меня есть функция ajax, которая отправляет данные и обновляет div после того, как данные были обновлены. Проблема в том, что элементы jQuery в div разбиваются после отправки формы, а div обновлен.

function getURLParameter(name) { 
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null 
} 
tournamentid = getURLParameter('id'); 
$(document).ready(function() { 
    $(document).on('click', "button#submit" ,function(){ 
     $.ajax({ 
      type: "POST", 
      url: "test.php?page=tourneys&id=" + tournamentid + "&action=teams&submit=true", //process to mail 
      data: $('#swapteams').serialize(), 
      success: function(msg){ 
       createNoty('The teams has been updated!', 'success'); 
// Refresh the div after submission 
       $("#refresh").load("test.php?page=tourneys&id=" + tournamentid + "&action=teams #refresh"); 
      }, 
      error: function(xhr, status, error) { 
       var err = eval("(" + xhr.responseText + ")"); 
       alert(err.Message); 
} 
     }); 
     return false; 
    }); 
}); 
// the plugins and jQuery variables within the refresh div 
$(document).ready(function() { 
    $('a[id^="teamname"]').editable({ 
    ajaxOptions : { 
     type : 'post' 
    } 
}); 
}); 
$(document).ready(function() { 
    $('select[id="swap"]').change(function(){ 
     $("#saveprogress").show("fade"); 
    }); 
}); 

Answer 1

Вы должны использовать делегирование событий для поддержки динамически добавленных элементов также необходимо инициализировать плагин снова, как только ДИВ обновляется

function getURLParameter(name) { 
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null 
} 
tournamentid = getURLParameter('id'); 
$(document).ready(function() { 
    $(document).on('click', "button#submit", function() { 
     $.ajax({ 
      type: "POST", 
      url: "test.php?page=tourneys&id=" + tournamentid + "&action=teams&submit=true", //process to mail 
      data: $('#swapteams').serialize(), 
      success: function (msg) { 
       createNoty('The teams has been updated!', 'success'); 
       // Refresh the div after submission and pass a callback which will initialize the plugins 
       $("#refresh").load("test.php?page=tourneys&id=" + tournamentid + "&action=teams #refresh", createEditable); 
      }, 
      error: function (xhr, status, error) { 
       var err = eval("(" + xhr.responseText + ")"); 
       alert(err.Message); 
      } 
     }); 
     return false; 
    }); 
}); 
// the plugins and jQuery variables within the refresh div 
$(document).ready(createEditable); 

function createEditable() { 
    $('a[id^="teamname"]').editable({ 
     ajaxOptions: { 
      type: 'post' 
     } 
    }); 
} 

$(document).ready(function() { 
    //use event delegation 
    $(document).on('change', 'select[id="swap"]', function() { 
     $("#saveprogress").show("fade"); 
    }); 
});