jQuery ajax调用仅在第一次有效

Question

I am updating list of users based on the user's search parameter. The ajax async request only works when page loads, no subsequent calls have an impact. my search button seems to lose binding to the submit event.

Please point out how I can resolve this.

Here is my js file code for the async request:

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

Here is the view code:

<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

Finally fixed this issue that was driving me insane for 4 hours. All it was a case of using .html instead of replaceWith function.