jQuery的事件停在asp.net mvc的局部视图后（4）部分工作后二 [英] jQuery events stop working after partial view post in asp.net mvc(4) Part II

问题描述

我有以下布局视图 父视图是由几个PartialViews。其中之一是一个列表，其中每个项目都有相应的编辑按钮，该项目它加载到另一个PartialView，但这是通过AJAX加载到一个模式引导-对话框。

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.

通过点击编辑按钮谐音认为是没有问题加载模态对话框但在提交对话框的编辑按钮是停止射击的事件和模式没有得到加载了，我的意思是，单击处理程序编辑按钮停止加工。

By hitting the Edit buttons partials view are loaded without problem in the modal dialog but after Submit a dialog the Edit buttons stop to fire the event and the modal does not get loaded anymore, i mean, the click handler for Edit button stops working.

我相信这是由于这样的事实，发布后的模态IM AJAX-重新加载列表中的部分视图包含编辑按钮，所以我需要重新绑定的事件。但是这样做会形成一个圆形的呼叫beween编辑click事件和模态的形式提交？

I believe this is due to the fact that after posting the modal im ajax-reloading the List Partial View that contains Edit buttons and so i need to rebind the events. But by doing so it would form a circular call beween the edit click event and modal form submit?

在父视图中的脚本：

$(".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;
                });

            });
        });

请注意： 这个问题涉及到<一个href="http://stackoverflow.com/questions/24556680/using-jquery-with-partial-views-in-asp-net-mvc4">this 之一

Note: This question is related to this one

推荐答案

而不是事件直接绑定到你的按钮，它们固定到一个包含块不会得到刷新。您的活动将继续开火，即使你已经重新加载在局部视图内的内容。

Rather than bind the events to your buttons directly, anchor them to a containing block that doesn't get refreshed. your events will continue to fire even if you have reloaded the inner content in that partial 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股利添加到您的父视图，但你的想法

You'll need to tweak the script and add the div with id container to your parent view, but you get the idea

这篇关于jQuery的事件停在asp.net mvc的局部视图后（4）部分工作后二的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！