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>

Ok, This script is for searching some content from databse. it works great, but only once. When im trying to hit submit again in my from, its not working again. Only when I refresh page. Could someone help me?

My from in same index.cshtml file:

<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>

My controller:

  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

Because you are replacing the container. You should update only the content of that.

When you click for the first time, the response of the ajax call (the markup for the form) will replace the div (with id ="zawartosc"). So after this you do not have that div exist in your DOM any more. So your $targetElement is not going be the the container div (because it is gone !)

So instead of replacing the container div, simply update the content of that.

Replace

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

with

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

Answer 2

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

OR

$($targetElement).Load($newContent);