为什么以下的jquery Ajax调用只执行一次？

我在我的ASP.NET MVC项目下面的脚本：为什么以下的jquery Ajax调用只执行一次？

$(function() { 

var ajaxFormSubmit = function() { 
    var $form = $(this); 

    var options = { 
     url: $form.attr("action"), 
     type: $form.attr("method"), 
     data: $form.serialize() 
    }; 

    $.ajax(options).done(function (data) { 
     var $target = $($form.attr("data-otf-target")); 
     var $newHtml = $(data); 
     $target.replaceWith($newHtml); 
    }); 

    return false; 
}; 

$("form[data-otf-ajax='true']").submit(ajaxFormSubmit); 
});

为什么这个fonction执行只有一次？此功能用于更新对象列表，这里是剃须刀视图上的表格：

<form method="get" action="@Url.Action("Index")" data-otf-ajax ="true" 
data-otf-target="#RestaurantList"> 
<input type="search" name="searchTerm" /> 
<input type="submit" value="Search By Name" /> 
</form> 

<div id="RestaurantList"> 
@Html.Partial("_Restaurants") 
</div>

来源

2017-12-27 Khalil Lazhar

把JavaScript代码放在'RestaurantList' div之外......也许它会被ajax调用覆盖。 – Hackerman

尝试使用输入类型'button'并使用Jquery的'click（function）'执行上述函数，并让我知道.. –

javascript代码是在单独的文件中，我将它与jquery脚本捆绑在一起（@ Scripts.Render。。） –

您的功能只能执行一次。问题是，当您的处理程序第一次执行时，您将使用由ajax调用返回的HTML代码替换ID为RestaurantList的元素。

所以，执行下一个时间，这条线

var $target = $($form.attr("data-otf-target"));

不会有预期的行为（因为你的文档中与ID RestaurantList没有元素了。

尝试更新您RestaurantList元素的含量是以.html（）方法，而不是replaceWith（）：

$.ajax(options).done(function (data) { 
     var $target = $($form.attr("data-otf-target")); 
     var $newHtml = $(data); 
     $target.html($newHtml); 
    });

这样一来，你的元素仍然有相同的ID。你的处理程序的下一次执行应该可以正常工作。

来源

2017-12-27 15:34:24 RogerC

谢谢！它的作品完美 –

为什么以下的jquery Ajax调用只执行一次？

回答

相关问题