代码之家  ›  专栏  ›  技术社区  ›  KHL

为什么下面的Jquery Ajax调用只执行一次?

  •  2
  • KHL  · 技术社区  · 7 年前

    我的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视图上的表单:

    <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>
    
    1 回复  |  直到 7 年前
        1
  •  1
  •   Guillaume Georges    7 年前

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

    所以,下次执行时,这一行

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

    不会有预期的行为(因为没有id为的元素 餐厅列表 在您的文档中。

    尝试更新 餐厅列表 具有的元素。html()方法而不是replaceWith():

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

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