jquery - 为什么下面的 Jquery Ajax 调用只执行一次？

Question

我的 ASP.NET MVC 项目中有以下脚本:

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

为什么这个函数只执行一次？此函数用于更新对象列表，这是 razor View 上的表单:

<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

您的函数不会只执行一次。问题是，当您的处理程序第一次执行时，您将用 ajax 调用返回的 HTML 代码替换 id 为 RestaurantList 的元素。

所以，下次执行的时候，这一行

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

不会出现预期的行为(因为文档中不再有 id 为 RestaurantList 的元素。

尝试使用 .html() 方法而不是 ReplaceWith() 更新 RestaurantList 元素的内容:

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

这样，你的元素仍然具有相同的 id。并且处理程序的下一次执行应该可以正常工作。