爲什麼以下的jquery Ajax調用只執行一次？

我在我的ASP.NET MVC項目下面的腳本：爲什麼以下的jquery Ajax調用只執行一次？

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

爲什麼這個fonction執行只有一次？此功能用於更新對象列表，這裏是剃鬚刀視圖上的表格：

<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>

來源

2017-12-27 Khalil Lazhar

把JavaScript代碼放在'RestaurantList' div之外......也許它會被ajax調用覆蓋。 – Hackerman

嘗試使用輸入類型'button'並使用Jquery的'click（function）'執行上述函數，並讓我知道.. –

javascript代碼是在單獨的文件中，我將它與jquery腳本捆綁在一起（@ Scripts.Render。。） –

您的功能只能執行一次。問題是，當您的處理程序第一次執行時，您將使用由ajax調用返回的HTML代碼替換ID爲RestaurantList的元素。

所以，執行下一個時間，這條線

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

不會有預期的行爲（因爲你的文檔中與ID RestaurantList沒有元素了。

嘗試更新您RestaurantList元素的含量是以.html（）方法，而不是replaceWith（）：

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

這樣一來，你的元素仍然有相同的ID。你的處理程序的下一次執行應該可以正常工作。

來源

2017-12-27 15:34:24 RogerC

謝謝！它的作品完美 –

爲什麼以下的jquery Ajax調用只執行一次？

回答

相關問題