为什么以下的jquery Ajax调用只执行一次？

  • Z时代
  • 2024-01-10
  • 分类：问答

我在我的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。你的处理程序的下一次执行应该可以正常工作。

以上是 为什么以下的jquery Ajax调用只执行一次？ 的全部内容， 来源链接： utcz.com/qa/265906.html

回到顶部