jquery 选项卡和 Telerik 和 ajax 日期选择器

Question

我正在使用 jquery UI 选项卡并向其添加 Telerik datepicker（不想使用 jquery datepicker 来解决样式问题）..我可以看到选项卡上的控件，但是当我单击它时，它不会打开并且网址更改为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>

我的标签结构是：

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

对于 Telerik：

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

Answer 1

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

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

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

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

编辑：以下代码来自 jQueryUI 选项卡 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*/
   }

});