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>

好的，此腳本用於從數據庫搜索某些內容。 它很棒，但只有一次。 當我試圖從我再次點擊提交時，它不再起作用。 僅在刷新頁面時。 有人可以幫我嗎？

我來自同一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);
    }

編輯。

Answer 1

因為您要更換容器。 您應該只更新其中的內容。

第一次單擊時，ajax調用的響應（表單的標記）將替換div（標識為=“ zawartosc”）。 因此，在此之后，您的DOM中就不再存在該div。 因此，您的$targetElement不會成為容器div（因為它已經消失了！）

因此，無需替換容器div，只需更新其內容即可。

更換

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

同

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

Answer 2

$（$ targetElement）.html（$ newContent）;

要么

$（$ targetElement）.Load（$ newContent）;