Javascript 为什么我的ajax在提交加载了@HtmlRenderPartial的表单时只调用fire一次

我有一个带有两个局部视图的索引页。在加载的每个局部视图上，都有一个ajax调用，该调用按日期过滤内容。问题是ajax只成功触发一次，随后的表单提交只会导致页面完全刷新，即ajax没有触发。我将每个脚本移动到一个单独的文件中，并在我在布局页面中调用的包中引用它。再次尝试会产生相同的结果，即ajax事件只触发一次，当再次单击submit按钮时，不会发生任何事情。下面是我的代码

Index.Cshtml
@{
    ViewBag.Title = "";
    Layout ="~/Views/Shared/_Layout.cshtml";
}
<h2>TRANSACTIONS</h2>
@Html.Action("IndexGrid", "Transactions")
<h2>BREAKDOWN</h2>
@Html.Action("LoanBreakDown", "Transactions")
<div class="ajaxModal"><!-- Place at bottom of page --></div>

BreakdownDateFilter.js

$(document).ready(function() {
    $("#filterByDate").submit(function() {
        event.preventDefault();
        $("#TransactionTable").empty();
        $.ajax({
            type: "POST",
            url: "/Transactions/IndexGrid",
            data: $(this).serialize(),
            dataType: "html",
            success: function(data) {
                $("#TransactionTable").html(data);
            }
        });
    });
});

$(document).ready(function () {
    $("#searchloan").submit(function () {
        event.preventDefault();
        //$(".loading").html("Processing your request...");
        $("#loadbreakdown").empty();
        $.ajax({
            type: "POST",
            url: "/Transactions/LoanBreakDown",
            data: $(this).serialize(),
            dataType: "html",
            success: function (data) {
                $("#loadbreakdown").html(data);
            }
        });
    });
});

---

GridDateFilter.js负责IndexGrid.cshtml，而BreakdownDateFilter.js负责LoanBreakDown.cshtml。请注意，这两个视图都加载到主页中，即带有@Html.RenderPartial的index.cshtml页面，并且在调用jquery之后，脚本包含在布局页面中。

确定，因此我最终解决了这个问题。在chrome的开发者工具中闲逛了一段时间后，虽然我对javascript不太了解，但我注意到负责搜索功能的表单嵌入到了div中，我用ajax帖子的结果替换了div，因此dom发生了变化，当我再次提交时，它不再以同样的形式为目标。解决办法是把表格从那个div和Eureka中移出！成功了

$(document).ready(function() {
    $("#filterByDate").submit(function() {
        event.preventDefault();
        $("#TransactionTable").empty();
        $.ajax({
            type: "POST",
            url: "/Transactions/IndexGrid",
            data: $(this).serialize(),
            dataType: "html",
            success: function(data) {
                $("#TransactionTable").html(data);
            }
        });
    });
});

$(document).ready(function () {
    $("#searchloan").submit(function () {
        event.preventDefault();
        //$(".loading").html("Processing your request...");
        $("#loadbreakdown").empty();
        $.ajax({
            type: "POST",
            url: "/Transactions/LoanBreakDown",
            data: $(this).serialize(),
            dataType: "html",
            success: function (data) {
                $("#loadbreakdown").html(data);
            }
        });
    });
});