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

最后解决了这个让我疯狂4个小时的问题。所有这些都是使用.html而不是replaceWith函数。

jquery ajax调用仅适用于第一次

1 个答案: