问题: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/
但我不知道如何使用它:/
最佳答案
当您调用 .html() 来替换部分 View 内容时,您实际上是在用新元素替换现有 DOM 元素。因此,附加到这些元素的事件处理程序也会被删除,并且您的代码将停止工作。
您将必须重新分配事件处理程序。使用 .on() 函数来执行此操作。更好的方法是在父 View 中使用委托(delegate)事件处理程序。但您可以通过以下技巧获得结果。
更新您的“成功”函数,如下所示,
$("#kartaEcp").html(data);
$( "#id_sb_year" ).on( "change", function() {
pobierzTabele();
});
$( "#id_sb_month" ).on( "change", function() {
pobierzTabele();
});
关于javascript - 刷新后,JS 脚本在部分 View 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60146626/