调用.load()后，MVC C#、Partial View、Jquery load()无法正常工作

Question

我使用的是C#，MVC。

PartialView和jquery负载工作正常，我遇到了问题。

当用户点击一个名为Kit的超链接时，我会调用以下内容：

    public ActionResult KitsEdit(string id)
    {
        int idnbr = Convert.ToInt32(id);
        var Progs = db2.usp_KitInfo(idnbr)
                    .OrderBy(x => x.TDate).ToList();

        return PartialView(Progs);
    }

它在页面上加载PartialView。

"视图"有行，每行都有一个编辑超链接。当用户单击编辑超链接时，我会显示一个对话框，用户可以在其中修改每行上显示的一些信息，然后点击提交。这第一次效果很好。

在提交时，我打电话给我做一些验证，然后打电话给：

    $("#stlist").load('@Url.Action("KitsEdit", "Spr")' + '?id=' + '@Model.id'); 

因为我需要在页面上重新加载部分视图，以便用户可以看到更新的信息。

页面加载在表面上运行良好。然而，当我在加载后第二次单击"编辑"超链接时，对话框会显示一些以前有效的功能，但根本不起作用。例如，复选框不起作用，因为如果我单击它，值就不会正确地传递回控制器操作。此外，对于提交，我点击了一些代码，但这些代码根本不起作用。它直接进入控制器操作并绕过中的所有代码

    $("#submit").click(function ().

请注意，只有在调用load（）之后才会发生这种情况。

问题：除了.load（）之外，还有什么东西可以在页面上加载PartialView吗。如果没有，我该如何让它在.load（）.中正常工作

以下是提交点击的样子：

    $("#submit").click(function () {
    //  following .on code won't execute code inside of function so have it commented       
    // $("#submit").on("click", function () {  
         var inactivedate = $("#InactiveDate").val();
         var inactivecheck = $('#Inactive').is(':checked');
         var inactivereason = $('#InactiveReason option:selected').text();
         if ((!inactivedate || !$.trim(inactivedate)) && $('#Inactive_cb').attr('checked') == true) {
             alert('Inactive Date must be entered.');
             return false;
         }
         if ($('#Inactive_cb').attr('checked') == true && inactivereason == '<Choose>') {
             alert('Inactive Reason must be selected.');
             return false;
         }
         var url = '@Url.Action("EditTrain", "Spr")';

         $.ajax({
             type: "POST",
             url: url,
             async: false,
             data: $('#theForm').serialize()               
           });

         $("#stlist").load('@Url.Action("kitsEdit", "Spr")' + '?id=' + '@Model.spkrid');
         parent.$.fn.colorbox.close();
         return false;
     });
 });

提前谢谢。

Answer 1

load函数正在动态地向DOM注入一些新内容。因此，旧的事件绑定不适用于新元素。您需要使用jQuery on

更改

$("#submit").click(function (e) {
  //some code 
});

至

$(document).on("click","#submit",function (e) {
  e.preventDefault() // if you need
  //some code 
});

jquery on适用于当前和未来的元素。

Answer 2

部分视图中有JavaScript代码吗？如果在局部视图中连接了任何事件，则在重新加载控件时它们将不起作用。

如果需要重新绑定事件，请在进行AJAX调用后在success函数中执行。

Answer 3

您正确地使用了.load（），但您需要更改事件处理程序，以便使用.on（）或.delete（）将事件绑定到新创建的元素上。如下所示：

$("#submit").on("click", function(){
  //do your stuff
});

Answer 4

$("#submit").live('click', function () {}

这应该工作