jQuery 事件在 asp.net mvc(4) 第二部分中的部分 View 发布后停止工作

Question

我有一个具有以下布局的 View 父View由若干个PartialView组成。其中之一是一个列表，其中每个项目都有一个相应的“编辑”按钮，该按钮将项目加载到另一个 PartialView 中，但这是通过 ajax 加载到模式 Bootstrap 对话框中的。

通过点击“编辑”按钮，部分 View 可以在模式对话框中毫无问题地加载，但在提交对话框后，“编辑”按钮停止触发事件，并且模式不再加载，我的意思是，“编辑”按钮的单击处理程序停止在职的。

我相信这是因为在 Release模式后我 ajax 重新加载包含编辑按钮的列表部分 View ，因此我需要重新绑定(bind)事件。但是这样做会在编辑点击事件和模态表单提交之间形成循环调用吗？

父 View 中的脚本:

$(".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有关

Answer 1

不要将事件直接绑定(bind)到按钮，而是将它们锚定到不会刷新的包含 block 。即使您已重新加载该部分 View 中的内部内容，您的事件也会继续触发。

$("#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 添加到父 View 中，但您明白了