javascript - 递归调用 jquery 后控件将不起作用

Question

我正在模式对话框中打开 mvc View 。 我正在尝试进行递归调用，我面临的问题是:递归调用后， View 正确加载，但 View 上的任何控件都不起作用:

在 Main.js 中:

$(function () {
  $(document).on('click', '.ddlCart li', Mod.Carts);
}

Carts.js:

 var Mod = Mod || {};
    Mod.Carts = function (e) {
                var ddlselectedVal = $(this).attr('id');
                var selectedListinsCount = selected_Listings.length;
                var SelectedMlsnums = selected_Listings.join();
                var agentId = $("#AgentId").val();

                var Action;

                var EnvironmentURL = $("#EnvironmentURL").val();


                var postData = { AgentId: agentId, Mlsnums: SelectedMlsnums, ActionTypeValue: “PreAddToCart” };

                var close = function (event, ui) {
                     $('#dvModalDialog').dialog("close");
                              }
                var open = function (event, ui) {    

                    var url = EnvironmentURL + "MLSReports/Stats/SearchContacts";


                    $("#btncart_cancel").on("click", function () {
                        $('#dvModalDialog').dialog("close");
                    });

                    $("#btncart_submit").on("click", function () {

                        var url = EnvironmentURL + "MLSReports/Stats/Cart";

                        //Send the data using post and put the results in a div                   
                        $.post(url, {
                            AgentId: agentId, Mlsnums: SelectedMlsnums, ActionTypeValue: "AddToCart"
                        },
                            function (data) {
                                // Replace current data with data from the ajax call to the div.         
                                $("#dvModalDialog").empty().append(data);
                            });                 

                    });

                    $("#lnkCreateNewcart").on("click", function () {

                        var url = EnvironmentURL + "MLSReports/Stats/Cart";
                        //Send the data using post and put the results in a div                   
                        $.post(url, {
                            ActionTypeValue: "preAddorEditContact"
                        },
                            function (data) {
                                //debugger;
                                // Replace current data with data from the ajax call to the div.         
                                $("#dvModalDialog").empty().append(data);


                                $("#btnCancelContact").on("click", function () {
                                      ////********** replace the view (Contact) with the view (Cart).
    // In the cancel event I am loading the previous page.I am having problem here. after a recursive call none of the controls work.**  

                            // rd.open();
this.Mod.Carts();



                                  }); 
                           });
                    });

                    };
                    if (ddlselectedVal == "AddtoCart") {
                        var rd = Mod.ReportsDialog({ title: 'Add To Cart', close: close, open: open });
                        rd.url = EnvironmentURL + "/MLSReports/Stats/Cart";
                        rd.targetElement = '#dvModalDialog'// '#dvSendEmail'
                        rd.formName = '#frmCart'
                        rd.postData = postData
                        rd.open();
                    }

                };

Answer 1

当使用 this.Mod.Carts(); 时，引用函数内部 this 的值将会有所不同。在这种情况下，您应该在调用 Carts 函数时使用 call 将 this 的值绑定(bind)到正确的值。

$("#btnCancelContact").on("click", function () {
 Mod.Carts.call(this);
});