为什么以下的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>
答
您的功能只能执行一次。问题是,当您的处理程序第一次执行时,您将使用由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。你的处理程序的下一次执行应该可以正常工作。
+0
谢谢!它的作品完美 –
把JavaScript代码放在'RestaurantList' div之外......也许它会被ajax调用覆盖。 – Hackerman
尝试使用输入类型'button'并使用Jquery的'click(function)'执行上述函数,并让我知道.. –
javascript代码是在单独的文件中,我将它与jquery脚本捆绑在一起(@ Scripts.Render。 。) –