MVC 5、Ajax、Jquery - 脚本只运行一次答案

【问题标题】：MVC 5, Ajax, Jquery - script works only onceMVC 5、Ajax、Jquery - 脚本只运行一次
【发布时间】：2017-01-30 20:16:20
【问题描述】：

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

好的，此脚本用于从数据库中搜索一些内容。它很好用，但只有一次。当我试图在我的 from 中再次点击提交时，它不再工作了。只有当我刷新页面时。有人可以帮我吗？

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

已编辑。

【问题讨论】：

标签： javascript jquery ajax asp.net-mvc html

【解决方案1】：

因为您要更换容器。您应该只更新它的内容。

当您第一次单击时，ajax 调用的响应（表单的标记）将替换 div（id ="zawartosc"）。因此，在此之后，您的 DOM 中不再存在该 div。所以你的$targetElement 不会是容器 div（因为它已经消失了！）

所以不要替换容器 div，只需更新它的内容。

替换

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

与

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

【讨论】：

Shyju - 非常感谢。它现在工作正常。我花了很多时间想通了，但没有结果。

【解决方案2】：

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

或

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

【讨论】：