MVC 5, Ajax, JQuery - скрипт работает только один раз

Question

<script> 
$(function() { 

    var ajaxSubmit = function() { 
     var $form = $(this); 
     var settings = { 
      data: $(this).serialize(), 
      url: $(this).attr("action"), 
      type: $(this).attr("method") 
     }; 
     $.ajax(settings).done(function (result) { 
      var $targetElement = $($form.data("ajax-target")); 
      var $newContent = $(result); 
      $($targetElement).replaceWith($newContent); 
      $newContent.effect("slide"); 

     }); 
     return false; 
    }; 

    $("#search-form").submit(ajaxSubmit); 
}); 
</script> 

Хорошо, этот скрипт предназначен для поиска содержимого из базы данных. он отлично работает, но только один раз. Когда я пытаюсь попасть в submit снова в моем, это не работает снова. Только когда я обновляю страницу. Может кто-нибудь мне помочь?

Мой из в то же index.cshtml файла:

<div> 
<form id="search-form" method="get" data-ajax="true" data-ajax-target="#zawartosc" data-ajax-update="#zawartosc"> 
    <input id="search-filter" type="search" name="searchQuery" 
      data-autocomplete-source="@Url.Action("MiejscaPodpowiedzi", "Miejsce")" 
      placeholder="Wprowadź tekst, aby filtrować..." /> 
    <input type="submit" id="send" value="Send" /> 
</form> 

<div id="zawartosc"> 
    @Html.Partial("_ListaMiejsc") 
</div> 

Мой контроллер:

public class HomeController : Controller 
{ 
    private DaneKontekst db = new DaneKontekst(); 

    public ActionResult Index(string searchQuery = null) 
    { 
     var miejscaNaSwiecie = db.MiejscaNaSwiecie.Where(o => (searchQuery == null || 
     o.NazwaMiejscaNaSwiecie.ToLower().Contains(searchQuery.ToLower()) || 
     o.KrajMiejscaNaSwiecie.ToLower().Contains(searchQuery.ToLower()) || 
     o.OpisMiejscaNaSwiecie.ToLower().Contains(searchQuery.ToLower()))).ToList(); 

     var ViewModel = new HomeIndexViewModel() 
     { 
      MiejscaNaSwiecie = miejscaNaSwiecie 
     }; 

     if (Request.IsAjaxRequest()) 
     { 
      return PartialView("_ListaMiejsc", ViewModel); 
     } 

     return View(ViewModel); 
    } 

Edited.

Answer 1

Потому что вы заменяете контейнер. Вы должны обновить только содержимое этого.

Когда вы нажмете в первый раз, ответ вызова ajax (разметка для формы) заменит div (с id = "zawartosc"). Поэтому после этого у вас больше нет этого div в вашем DOM. Таким образом, ваш $targetElement не будет контейнером div (потому что он ушел!)

Поэтому вместо замены контейнера div просто обновите его содержимое.

Заменить

$($targetElement).replaceWith($newContent); 

с

$($targetElement).html($newContent); 

Answer 2

$ ($ targetElement) .html ($ newContent);

ИЛИ

$ ($ targetElement) .load ($ newContent);