次のJquery Ajax Callはなぜ1回だけ実行されるのですか？

Question

私は私のASP.NET MVCプロジェクトで次のスクリプトがあります。このfonctionは一度だけ実行される理由

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

を？この関数は、オブジェクトのリストを更新するためのものです。ここでは、かみそりビューのフォームがあります。

<form method="get" action="@Url.Action("Index")" data-otf-ajax ="true" 
data-otf-target="#RestaurantList"> 
<input type="search" name="searchTerm" /> 
<input type="submit" value="Search By Name" /> 
</form> 

<div id="RestaurantList"> 
@Html.Partial("_Restaurants") 
</div> 

Answer 1

この関数は1回だけ実行されません。問題は、初めてハンドラを実行したときに、idがRestaurantListの要素をajax呼び出しから返されたHTMLコードに置き換えることです。だから、

、それが実行され、次回、このライン

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

ドキュメント内のid RestaurantListとのどの要素がもはや存在しないため、（期待される動作を持っていません。

てみ更新

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

その方法は、あなたの要素はまだあり：代わりにreplaceWith（）の.htmlを（）メソッドを使用してRestaurantList要素の内容同じid。そして、次のハンドラの実行はうまくいくはずです。