Warum wird der folgende Jquery Ajax Call nur einmal ausgeführt?

Question

ich habe das folgende Skript in meinem ASP.NET MVC-Projekt:

$(function() { 

var ajaxFormSubmit = function() { 
    var $form = $(this); 

    var options = { 
     url: $form.attr("action"), 
     type: $form.attr("method"), 
     data: $form.serialize() 
    }; 

    $.ajax(options).done(function (data) { 
     var $target = $($form.attr("data-otf-target")); 
     var $newHtml = $(data); 
     $target.replaceWith($newHtml); 
    }); 

    return false; 
}; 

$("form[data-otf-ajax='true']").submit(ajaxFormSubmit); 
}); 

warum diese fonction nur einmal ausführt? Diese Funktion dient zum Aktualisieren einer Liste von Objekten, hier ist das Formular in der Rasiereransicht:

Answer 1

Ihre Funktion wird nicht nur einmal ausgeführt. Das Problem besteht darin, dass Sie bei der ersten Ausführung des Handlers das Element mit der ID RestaurantList durch den vom AJAX-Aufruf zurückgegebenen HTML-Code ersetzen.

Also, das nächste Mal ausgeführt wird, diese Linie

var $target = $($form.attr("data-otf-target")); 

nicht das erwartete Verhalten hat (weil es kein Element mit der ID ist RestaurantList in Ihrem Dokument mehr.

Versuchen Aktualisierung der Inhalt Ihres RestaurantList Element mit dem .html() -Methode statt replaceWith():

$.ajax(options).done(function (data) { 
     var $target = $($form.attr("data-otf-target")); 
     var $newHtml = $(data); 
     $target.html($newHtml); 
    }); 

Auf diese Weise Ihr Element noch hat die gleiche ID. Und die nächste Ausführung Ihres Handlers sollte gut funktionieren.