切换Jquery选项卡并在asp.net mvc部分视图中返回后，Jquery插件时间选择器不会重新绑定

目前我正在asp.net mvc 3中的选项卡上显示不同的输入表单。 每个选项卡都有多个子局部视图。[见下图] 其中1个部分视图包含一个用于创建会话的表单，在该表单上方是另一个部分视图，其中包含一个会话列表（尚未创建会话）。。 切换顶部的选项卡时，Francois Gelinas的jquery timepicker插件（称为jquery.ui.timepicker.js）在选择另一个选项卡，然后返回到选项卡编辑过程和程序默认值后，无法重新绑定/重新初始化。 我使用的是razor引擎，而不是默认的web引擎

母版页/文件_Layout.cshtml

然后，我尝试在输入框的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选项卡通常在未被查看时禁用包含每个选项卡元素的div。也就是说，如果Jquery找不到元素，那么它就无法创建日期选择器，因此当选择选项卡时，您必须触发一个事件，首先检查元素是否存在，然后相应地创建日期选择器

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

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

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

---

时间选择器在DOM中创建一个实例一次，并在每次显示时使用该实例（内联显示除外），这就是为什么您在DOM中看到它，这并不意味着它与输入分离

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

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

})

如果StartTime正在失去其绑定，则在再次绑定它之前，必须先删除它的HastinmePicker类

---

今晚我将研究datepicker在这种情况下的反应，并使其在timepicker上工作，当我找到解决方案时，它将更新。

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

---

特别感谢Francois Gelinas抽出一天的时间提供帮助，也感谢黑匣子运营部的帮助。

我应该调用什么来将其重新绑定到输入？任何调用$'StartTime'。时间选择器的尝试；导致错误的时间选择器不是一个函数。。。当然，点击输入框没有任何作用。很抱歉，我试图重新创建问题失败。我知道内容是在选项卡中动态加载的，但这应该不是问题。您是否得到超过1个id为StartTime的元素？——一个带有jQuery选项卡和时间选择器的测试页面，我试图在其中重现问题：呵呵。。我正在同时学习firebug、jquery和asp.net mvc！：我在《萤火虫》里又演了几场。。我发现了。1.再次显示选项卡时，输入框中的类将丢失。使用firebug/firequery，我实时添加了类，当然这不会重新绑定事件…：我只有一个id为StartTime的元素。也没有类命名冲突。。。所以一旦它被束缚。。隐藏，重新显示它不再绑定到点击事件，我们如何重新绑定它？无法使用最初使用的调用，在我应该调用的类中是否有隐藏的方法？很好，您的示例很有效。。。不过我觉得区别在于我有更深层次的控制？每次选项卡再次获得焦点时是否调用document.ready函数？您第二次看到的StartTime输入与第一次看到的实例不同，没有索引，也没有HastinmePicker类。你应该把时间选择器重新连接到它上。现在您得到的是，timepicker不是一个函数，因为要么脚本没有加载，要么$不再是jQuery。也许可以试试jQuery'StartTime'。时间选择器；

@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>

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

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

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

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

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