切换 jquery 选项卡并在 asp.net mvc 部分视图中返回后，jquery 插件 timepicker 不会重新绑定答案

【问题标题】：Jquery plugin timepicker doesn't rebind after switching jquery tabs and returning in asp.net mvc partial views切换 jquery 选项卡并在 asp.net mvc 部分视图中返回后，jquery 插件 timepicker 不会重新绑定
【发布时间】：2011-07-24 05:13:59
【问题描述】：

目前我正在努力在 asp.net mvc 3 的选项卡上显示不同的输入表单。每个选项卡都有几个子部分视图。 [见下图]
部分视图中的 1 个包含用于创建会话的表单，其上方是另一个部分视图，其中包含已创建的会话列表（还没有）.. 在顶部切换选项卡并再次返回时，名为 jquery.ui.timepicker.js 的 Francois Gelinas 的 jquery timepicker 插件 无法重新绑定/reinitialize 在选择另一个选项卡然后返回到选项卡 Edit Course and Program Defaults。
我使用的是剃须刀引擎，而不是默认的网络引擎...

母版页/文件_Layout.cshtml

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  <html>  
  <head>  
   <meta http-equiv="X-UA-Compatible" content="IE=8" />    
   <title>@ViewBag.Title</title>  
   <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"  type="text/javascript">   </script>  
   <script src="@Url.Content("~/Scripts/jquery.ui.core.js")" type="text/javascript">   </script>   
   <script src="@Url.Content("~/Scripts/jquery.livequery.js")" type="text/javascript">  </script>  
   <script src="@Url.Content("~/Scripts/jquery.ui.widget.js")" type="text/javascript"></script>  
   <script src="@Url.Content("~/Scripts/jquery.ui.tabs.js")" type="text/javascript"></script>  
   <script src="@Url.Content("~/Scripts/jquery.ui.timepicker.js")" type="text/javascript"></script>  
   <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.custom.js")" type="text/javascript"></script>  

   <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />  
   <link href="@Url.Content("~/Content/jquery-ui-1.8.11.custom.css")" type="text/css" rel="stylesheet" />  
   <link href="@Url.Content("~/Content/jquery-ui-timepicker.css")" type="text/css" rel="stylesheet" />  

   <script src="@Url.Content("~/Scripts/MicrosoftAjax.debug.js")" type="text/javascript"></script>
   <script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js")" type="text/javascript"></script>

Index.cshtml 它会创建您在上图中看到的 3 个选项卡。

@using MvcHtmlHelpers;
<link href="@Url.Content("~/Content/BoxBackgrounds.css")" rel="stylesheet" type="text/css" />


@{
    ViewBag.Title = "Index";
 }

<h2>Index</h2>
<div id="tabs">
 <ul>
   <li >@Html.TabLink("Edit Student Defaults", "EditStudentDefaults", "Creation") </li>
   <li>@Html.TabLink("Edit Exam and Certification Defaults", "EditCertAndExamDefaults", "Creation") </li>
  <li>@Html.TabLink("Edit Course and Program Defaults", "EditCourseAndProgramDefaults", "Creation")</li>
 </ul>
</div>

<script type="text/javascript" language="javascript">

$(document).ready(function() {
    $("#tabs").tabs({
    cache: false
   });

 });

EditCourseAndProgramDefaults.cshtml

@model SMS3demo.Controllers.CourseAndProgramDefaultsViewModel
<table width="100%" class="ConfigStudentsGradient" cellspacing="0" border="0" frame="void" style="border-collapse:collapse">
 <tr>
     <td>
        @Html.Partial("ListSessions")
     </td>
     <td>
        @Html.Partial("ListCourses")
     </td>
     <td>
        @Html.Partial("ListPrograms")
    </td>


 </tr>
 <tr>
     <td>
        @Html.Partial("AddSession")
     </td>
     <td>
         @Html.Partial("AddCourse")
     </td>
     <td>
         @Html.Partial("AddProgram")
     </td>

 </tr>

</table>

AddSession.cshtml

@model SMS3demo.Controllers.CourseAndProgramDefaultsViewModel  
@using (Html.BeginForm()) {
<script type="text/javascript">
 $(document).ready(function () {
     $('#StartTime').timepicker({
         showPeriod: true,
         showLeadingZero: false
     });
 });

@Html.ValidationSummary(true)
<fieldset>
    <legend>Session</legend>
        <table>
<tr>
                <td>
                    <span class="SessionStartTime">@Html.TextBoxFor(model => model.SessionStartTime, new {@id = "StartTime"  }) </span>


                    @Html.ValidationMessageFor(model => model.SessionStartTime)
                </td>

我已经研究了几天这个话题。我尝试了以下想法/选项方法...

使用直播
使用实时查询
尝试在输入字段的每个 onclick 事件后重新创建绑定
我试图看看其他人是如何使用另一个控件解决这个问题的 datepicker，因为这个插件和它很相似。

我知道发生了什么：当我切换回选项卡时，时间选择器正在失去其绑定。我在萤火虫中发现创建了一个隐藏的时间选择器对象，并且在切换选项卡时它不会消失......但是，当再次选择选项卡时，我似乎无法重新绑定或回忆重新创建的原始方法。我知道 document.ready 仅在第一次加载部分视图时才被称为 1x...
我尝试执行以下操作：在

<script type="text/javascript">
    $(document).ready(function() {
        initJQueryWidgets();
    });

    function initJQueryWidgets() {
        $("[ID$=StartTime1]").timepicker({
                showPeriod: true,
                showLeadingZero: false,
                zIndex: 1
            });
    }


</script>

我也试过在页面顶部的脚本括号中显示上面

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
         initJQueryWidgets();
    });

然后我尝试在输入框的 onClick 偶数处理程序中调用 initJqueryWidgets

 <span class="SessionStartTime">@Html.TextBoxFor(model => model.SessionStartTime, new {@id = "StartTime", @onClick="initJqueryWidgets"  }) </span>

我一直收到的错误是 $("#StartTime").timepicker 不是函数 (?)()52（第 2 行）匿名（）创建（第 29 行） [中断此错误] $("#StartTime").timepicker({showPeriod: true, showLeadingZero: false});

【问题讨论】：

标签： jquery asp.net-mvc-3 razor partial-views jquery-ui-timepicker

【解决方案1】：

时间选择器在 DOM 中创建一次实例，并在每次显示时都使用该实例，内联显示除外，这就是您在 DOM 中看到它的原因，这并不意味着它与输入分离。

如果时间选择器现在在点击时显示，这可能意味着存在 zIndex 问题或者它丢失了点击事件。

(document).ready(function () {
 $('#StartTime').timepicker({
     showPeriod: true,
     showLeadingZero: false,
     zIndex: 9999
 });

});

如果#StartTime 失去它的绑定，您必须在再次绑定之前删除它的“hasTimePicker”类。

今晚我将调查日期选择器在这种情况下的反应，并使其也适用于时间选择器，当我找到解决方案时会更新。

【讨论】：

我应该调用什么来将其重新绑定到输入？任何尝试调用 $('#StartTime').timepicker();导致错误 timepicker is not a function... 然后当然点击输入框不会做任何事情。
抱歉，我尝试重现问题失败了。我了解内容是在选项卡中动态加载的，但这应该不是问题。您是否获得了 1 个以上 id 为 StartTime 的元素？ --- 一个带有 jQuery 选项卡和时间选择器的测试页面，我试图在其中重现问题：fgelinas.com/code/timepicker/tab_bug
呵呵..我正在同时学习firebug、jquery和asp.net mvc！ :) 我在萤火虫中玩了一些。我发现了。 1.再次显示选项卡时，输入框中的类丢失。使用firebug / firequery我实时添加了类，当然这不会重新绑定事件...... :(我只有1个元素的ID为StartTime。也没有类命名冲突......所以一旦绑定......隐藏，重新显示它不再绑定到点击事件，我们如何重新绑定它？不能使用原来使用的相同调用，你在我应该调用的类中有隐藏方法吗？
很好，您的示例有效...我认为不同之处在于我将控件嵌套得更深？每次选项卡再次获得焦点时都会调用您的 document.ready 函数吗？
您第二次看到的#StartTime 输入与第一次不同（未绑定且没有 hasTimepicker 类）。您应该将时间选择器重新附加到它。现在你得到“timepicker is not a function”，因为脚本没有加载或者 $ 不再是 jQuery。也许试试 jQuery('#StartTime').timepicker();

【解决方案2】：

我通过删除加载其他 jquery 版本的调用来修复它！单击选项卡时检查 Firebug 控制台，查看正在处理的 get 命令。确保只链接 1 个版本的 jquery！哇！另外，我发现在部分视图中删除所有脚本链接引用，并放入母版页，更容易跟踪和更正。

特别感谢 Francois Gelinas 抽出时间提供帮助，也感谢 Black Box Operations 提供的帮助。

【讨论】：

【解决方案3】：

当不查看时，Jquery 选项卡通常会禁用包含每个选项卡元素的 div。也就是说，如果 Jquery 找不到该元素，那么它就无法创建日期选择器，因此您必须在选择选项卡时触发一个事件，以首先检查元素是否存在，然后创建日期选择器因此。

$('#tabs a#idOfTabContainingStartTime').bind('click', function(){
    if( $("#StartTime").length ){
         $('#StartTime').timepicker({
             showPeriod: true,
             showLeadingZero: false
         });
    }
}

如果这不能解决您的问题，那么可能是因为 Jquery 对整个 tabs/div/hiding 感到满意。当您选择另一个选项卡时，您当前正在查看的选项卡被隐藏，但 Jquery 也喜欢隐藏选项卡内的所有内容，因此您可能需要创建另一个调用来检查当前隐藏的任何元素在选项卡内并迭代地显示它们。

$('#tabs a#idOfTabContainingStartTime :hidden').each(function(){
    $(this).show();
});

【讨论】：