Ответ от запроса AJAX отображается только один раз

Question

У меня есть код, который отправляет запрос ajax при отправке формы. Это работает в первый раз, когда форма отправляется (это модуль поиска), но только один раз. Я добавил эффект, чтобы выделить таблицу при возврате данных, и вы можете видеть ее только один раз (данные меняются только один раз).

Когда я смотрю ответ в инструментах chrome dev, я вижу, что он содержит данные нового поискового запроса, но это не показано. Почему я могу показывать результаты только один раз?

JS:

$(function() { 
// Creates an ajax request upon search form submit 
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-nn-target")); 
     var $newHtml = $(data); 
     $target.replaceWith($newHtml); 
     $newHtml.effect("highlight"); 
    }); 

    // Prevent default action 
    return false; 
}; 

$("form[data-nn-ajax='true']").submit(ajaxFormSubmit); 
}); 

HTML:

<form method="GET" action="@Url.Action("Index", "Show")" data-nn-ajax="true" data-nn-target="#contentlist" class="form-search"> 
    <div class="input-append mysearch"> 
     <input type="search" class="span5 search-query" name="query" data-nn-autocomplete="@Url.Action("AutoComplete")" /> 
     <input type="submit" class="btn" value="Search" /> 
    </div> 
</form> 

<div id="contentlist"> 
    @Html.Partial("_Shows", Model) 
</div> 

Answer 1

Я думаю, вы должны использовать html() вместо replaceWith() метода:

$target.html($newHtml); 

Answer 2

просто идея ... попробовать

$target.html(data); 

вместо

$target.replaceWith($newHtml); 

По ReplaceWith, вы можете фактически удалить DIV, который вы хотите, чтобы заполнить содержание. Затем, во второй раз, он не нашел DIV, чтобы вставить содержимое в.