JS 脚本在刷新后在局部视图中不起作用

Question

问题： partialview 包含 js 脚本，当它们第一次加载时，它们可以工作。第二次加载后，js脚本停止工作。

描述：我在选择框上的值更改时重新加载部分视图（这调用此函数）

@(Html
        .DevExtreme()
        .SelectBox()
        .ID("id_sb_year")
        .DataSource(d => d
            .Mvc()
            .Controller("Ecp")
            .LoadAction("WezRok")
            .Key("Rok")
        )
        .DisplayExpr("Rok")
        .ValueExpr("Rok")
        .SearchEnabled(true)
        .OnValueChanged("pobierzTabele")
                        )

@(Html
        .DevExtreme()
        .SelectBox()
        .ID("id_sb_month")
        .DataSource(d => d
            .Mvc()
            .Controller("Ecp")
            .LoadAction("WezMiesiac")
            .Key("Miesiac")
        )
        .DisplayExpr("DescMiesiac")
        .ValueExpr("Miesiac")
        .SearchEnabled(true)
        .OnValueChanged("pobierzTabele")
                        )

必须从两个选择框中选择两个值才能使该功能起作用

function pobierzTabele() {

 var numerMiesiaca = $("#id_sb_month").dxSelectBox("instance").option("value")
    var numerRoku = $("#id_sb_year").dxSelectBox("instance").option("value")

    if (numerMiesiaca != null && numerRoku != null) {

        function daysInMonth(month, year) {
            return new Date(year, month, 0).getDate();
        }

        var liczbaDni = daysInMonth(numerMiesiaca, numerRoku);


        var userDate = {
             numerMiesiaca: $("#id_sb_month").dxSelectBox("instance").option("value"),
             numerRoku: $("#id_sb_year").dxSelectBox("instance").option("value"),
             liczbaDni: liczbaDni
         };

 $.ajax({

            url: "@Url.Action("PartialTabelaEcp", "Home")",
            type: "POST",
            dataType: "html",
            data: {"userDate": JSON.stringify(userDate)},
            cache: false,
            success: function (data) {

                $("#kartaEcp").html(data);


            },
            failure: function (error) {
                alert(error);

            },
            error: function (error) {
                alert(error);
            }
        });
    }

}

效果：在这个地方抛出这个partialview

   <div class="kartaEcp" name="kartaEcp" id="kartaEcp">
        </div>

部分观点：

@using AppEcp.Models
@model ParentView



@using (Html.BeginForm("Save", "Home", FormMethod.Post, new { id = "tableForm" }))
{
  <table><table>
}

<script src="~/js/tabela/Arkusz.js"></script>
<script src="~/js/tabela/halfStartEnd.js"></script>
<script src="~/js/tabela/minimumEnds.js"></script>

现在：我需要刷新页面才能再次选择值并再次加载部分视图，这是不可接受的

我发现了这个https://api.jquery.com/on/

但我不知道如何使用它：/

Answer 1

当您调用 .html() 来替换部分视图内容时，您实际上是在用新的 DOM 元素替换现有的 DOM 元素。结果，附加到这些元素的事件处理程序也被删除，您的代码将停止工作。

您将不得不重新分配事件处理程序。使用 .on() 函数来执行此操作。更好的方法是在父视图中使用委托事件处理程序。但是您可以通过以下技巧获得结果。

如下更新你的“成功”函数，

$("#kartaEcp").html(data);

$( "#id_sb_year" ).on( "change", function() {
    pobierzTabele();
});

$( "#id_sb_month" ).on( "change", function() {
    pobierzTabele();
});