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