I have a View with the following layout
The parent View is composed of several PartialViews. One of which is a list where each item has a corresponding Edit button which loads the item into another PartialView, but this is loaded via ajax into a modal bootstrap-dialog.
通过点击“编辑”按钮，部分视图可以在模式对话框中毫无问题地加载，但在提交对话框后，“编辑”按钮停止触发事件，并且模式不再加载，我的意思是，“编辑”按钮的单击处理程序停止工作。
我相信这是因为在发布模式后我 ajax 重新加载包含编辑按钮的列表部分视图，因此我需要重新绑定事件。但是这样做会在编辑单击事件和模态表单提交之间形成循环调用吗？
父视图中的脚本：
$(".btn.mylink").on("click", function () {
var id = $(this).data('id');
var url = "/SalidaDetalle/Edit/" + id;
$.get(url, function (data) {
$(".modal-body").html(data);
$('#myModal').modal('show');
$(".edit-detail").on('submit', function () {
$.post($(this).attr('action'),
$(this).serialize(),
function (data, status) {
$('#myModal').modal('hide');
$("#details").html(data);
}).error(function (error, status, a, b) {
writeError('msgError', 'Error processing request. Please check errors and try again!');
$('.modal-body p.body').html(error.responseText);
});
return false;
});
});
});
笔记： 这个问题与this one https://stackoverflow.com/questions/24556680/using-jquery-with-partial-views-in-asp-net-mvc4
不要将事件直接绑定到按钮，而是将它们锚定到不会刷新的包含块。即使您已在该部分视图中重新加载内部内容，您的事件仍将继续触发。
$("#container").on("click",".btn.mylink", function (evt) {
var id = $(evt.currentTarget).data('id');
var url = "/SalidaDetalle/Edit/" + id;
$.get(url, function (data) {
$(".modal-body").html(data);
$('#myModal').modal('show');
});
});
$("#container").on('submit',".edit-detail", function (evt) {
$.post($(evt.currentTarget).attr('action'),
$(evt.currentTarget).serialize(),
function (data, status) {
$('#myModal').modal('hide');
$("#details").html(data);
}).error(function (error, status, a, b) {
writeError('msgError', 'Error processing request. Please check errors and try again!');
$('.modal-body p.body').html(error.responseText);
});
return false;
});
您需要调整脚本并将带有 id 容器的 div 添加到父视图中，但您明白了