jQuery ajax调用仅在第一次有效

Question

我正在根据用户的搜索参数更新用户列表。 ajax异步请求仅在页面加载时有效，后续调用均不受影响。 我的搜索按钮似乎对提交事件失去了约束力。

请指出我该如何解决。

这是我的异步请求的js文件代码：

$(document).on("submit", "#test",null, function () {
    var $form = $(this); //wrap form element being submitted inside jquery to expose jquery functions. 

    var options = {

        url: $form.attr("action"),//url where this request should goto on the server.
        type: $form.attr("method"), //type of request - GET/POST
        data: $form.serialize() //suppress all inputs in the form element into name/value pairs as a string. 

    };

    //make async call to server with the above options.. Replace existing data on page with new data received from the async call to server.
    $.ajax(options).done(function (data) {
        var $target = $($form.attr("data-otf-target"));
        var $newHtml = $(data);
        $target.replaceWith($newHtml);
        $newHtml.effect("highlight");
    });

    return false; // don't request whole page.
});

这是视图代码：

<form method="get" id="test" action="@Url.Action("UserAccounts")" data-o-ajax="true" data-otf-target="#UserList">
    <div class="col-md-10">
        <input type="search" name="searchTerm" data-o-autocomplete="@Url.Action("AutoComplete", "Menu")"/>
        <input type="submit" value="Search"/>
    </div>

</form>

<div id="UserList">

    @Html.Partial("_Users", Model)
</div>

Answer 1

终于解决了这个使我发疯了四个小时的问题。 所有这些都是使用.html而不是replaceWith函数的情况。