javascript - 刷新后，JS 脚本在部分 View 中不起作用

Question

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

描述:我在选择框上的值更改时重新加载了部分 View (这调用了此函数)

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

部分 View :

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

现在:我需要刷新页面才能再次选择值并再次加载部分 View ，这是 Not Acceptable

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

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

Answer 1

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

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

更新您的“成功”函数，如下所示，

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

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

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