Jquery选项卡、teleerik和ajax日期拾取器

Question

我使用jquery UI选项卡，并添加了一个teleerik datepicker到它(不想使用jquery datepicker的样式问题)。我可以看到选项卡上的控件，但当我点击它时，它不打开，url更改为http://localhost/#。

我试过ajax CalendarExtender和同样的事情发生。

我没有得到任何这样的错误。

我使用jquery 1.5.1和jquery-ui-1.8.11.js。

编辑::

在主页我有:

    <link href="Content/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
    <link rel="Shortcut Icon" href="favicon.ico" />
    <script src="Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
    <script src="Scripts/jquery.qtip-1.0.0-rc3.min.js" type="text/javascript"></script>
    <script src="Scripts/cufon/cufon-yui.js" type="text/javascript"></script>
    <script src="Scripts/cufon/Lubalin_Graph_700.font.js" type="text/javascript"></script>
    <script src="Scripts/jquery.watermark.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validator.js" type="text/javascript"></script>
    <script type="text/javascript" src="scripts/jquery.tablesorter.min.js"></script>
    <script src="Scripts/jquery.colorbox.js" type="text/javascript"></script>

和我的TAB结构是:

        <div id="tabs">
                <ul>
                    <li title=""><a href="FAQs.aspx">FAQ</a></li>
                    <li title=""><a href="Profile.aspx">Profile</a></li>
                    <li title=""><a href="Contact.aspx">Contact</a></li>
        </div>

和jquery是:

    $("#tabs").tabs({
        select: function (event, ui) {
            $(ui.panel).empty();
            $(ui.panel).append("preloader.gif' />");
        },
        cache: false,
        ajaxOptions: { cache: false }
    });

在配置文件aspx页面我有这个ajax:

 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
                        <asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1">
                        </asp:CalendarExtender>

，对于teleerik:

<telerik:RadDatePicker runat="server" ID="date" Width="110px" ></telerik:RadDatePicker>

Answer 1

当AJAX加载页面时，重要的是要了解所有加载事件已经发生在主页面。这意味着在远程页面上的加载处理程序或document.ready中包装的任何代码将在加载后立即触发，而不会等待任何后续的html首先加载

如果远程页面中的脚本在它们引用的html之前存在，它们将在html存在之前触发。

将html放在脚本之前可以解决这个问题。

或者，您可以使用tab加载事件进行$.getScript调用

编辑:以下代码来自jQueryUI tabs API，每次ajax加载选项卡时都会触发:

$( "#tabs" ).on( "tabsload", function( event, ui ) {
   var active = $(this).tabs('option','active');
    /* index starts at zero for first tab*/
   if(active==2){
     /* iniitalize datepicker here*/
   }
});