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（id =“zawartosc”）。因此，在此之后，您的DOM中不再存在该div。所以你的$targetElement不会成为容器div（因为它已经消失了！）

因此，不要更换容器div，只需更新其内容。

替换

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

与

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

Answer 2

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

OR

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

MVC 5，Ajax，Jquery - 脚本只能运行一次

2 个答案: