使用.load插入页面片段时使用Jquery UI Datepicker

Question

我无法让jquery UI datepicker初始化。 我可以在独立的html文件上初始化它，但是当我使用jquery .load函数将html解析到现有容器时，就可以初始化它了； 日期选择器将不会初始化。 我正在使用bootstrap v.3，并尝试了各种jquery版本。

这是我的html（我省略了从索引加载的顶部）。

    <link href="css/customApp.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.10.4.custom.js"></script>
</head>

<body>
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">TheWarOnCost.com</a>
            </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Settings</a></li>
                <li><a href="#">Help</a></li>
                <li><a href="#">Logout</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li id="dashNav1" class="active"><a onclick="dashNav(1);">The War Room</a></li>
                <li id="dashNav2"><a onclick="dashNav(2);">Record New Battle</a></li>
                <li id="dashNav3"><a onclick="dashNav(3);">Remove Battle</a></li>
            </ul>
            <ul class="nav nav-sidebar">
                <li id="dashNav4"><a onclick="dashNav(4);">Goal Tracker</a></li>
                <li id="dashNav5"><a onclick="dashNav(5);">Year to Date Report</a></li>
            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div id="mainContent">
                <!-- Main content inserted here on nav click -->
            </div>
        </div>
    </div>
</div>

这是我的HTML的加载页面片段

<div id="addTripInsert">
<h1 class="page-header">New Battle Stats</h1>
<div class="row placeholders">
    <div id="clearFix">&nbsp;</div>
    <div class="col-xs-12 col-sm-12 placeholder aTiC_Wrap" style="xbackground-color:rgba(0,0,255,.4); height:100px;">
        <div class="col-xs-12 col-sm-12 addTripInputs" style="background-color: rgba(66, 139, 202, .3); border-radius:10px; height:75px;">
            <svg width="40" height="40" xmlns="http://www.w3.org/2000/svg" class="svgNum">
                <circle id="svg_1" r="16.93171" cy="20" cx="20" stroke-width="2" stroke="#428bca" fill="#ffffff"/>
                <text font-weight="bold" xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="29" id="svg_2" y="31" x="20" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#428bca" fill="#ef3bff">1</text>
            </svg>
            <h4 class="aTi_Title" style="width:117px;">Trip Date</h4>
            <div class="col-xs-12 col-sm-7 aTi_content">The date this battle was waged.</div>
            <div class="col-xs-12 col-sm-5 aTi_content"><input id="datepicker"></div>
        </div>

该片段已加载此javascript

function dashNav(option){

$("li").click( function() {
    $(".active").removeClass("active");
    $(this).addClass("active");
});

switch(option)
{
    case 1:
        // alert('You have selected Battle Tracker which is menu option #' + option);
        $( "#mainContent" ).load( "modules/mainTracker.php #trackerInsert" );
        break;
    case 2:
        // alert('You have selected Add shopping trip which is menu option #' + option);
        $( "#mainContent" ).load( "modules/addTrip.php #addTripInsert" );
        break;
    case 3:
        // alert('You have selected Remove shopping trip which is menu option #' + option);
        $( "#mainContent" ).load( "modules/removeTrip.php #remTripInsert" );
        break;
    case 4:
        // alert('You have selected Goal Tracker which is menu option #' + option);
        $( "#mainContent" ).load( "modules/goalTracker.php #goalTrackerInsert" );
        break;
    case 5:
        // alert('You have selected Year to date savings which is menu option #' + option);
        $( "#mainContent" ).load( "modules/ytdSavings.php #ytdsInsert" );
        break;
    default:
}
}

$( "#datepicker" ).datepicker();

基本上，页面的外部模板是使用php内核呈现的。 加载外部模板后，它将加载第一页片段（未显示）。 用户单击第二个导航选项（addTrip）后，它将使用.load将片段插入原始标记中的主要内容div中。 这与初始化搞混了吗？

抱歉，这听起来像是重复的问题。 我没有找到任何可以适当处理此案的内容。

Answer 1

当$（“ #datepicker”）.datepicker（）;时 调用方法时，主体中没有输入日期选择器，因此未初始化日期选择器。 您可以将回调附加到load方法以分配datepicker：

.....
  case 1:
    // alert('You have selected Battle Tracker which is menu option #' + option);
    $( "#mainContent" ).load( "modules/mainTracker.php #trackerInsert", function(){
       $( "#datepicker" ).datepicker();  
    } );
    break;
..........

使用.load插入页面片段时使用Jquery UI Datepicker

问题描述

1 个解决方案

解决方案1
0 2014-06-06 02:57:27

使用.load插入页面片段时使用Jquery UI Datepicker

问题描述

1 个解决方案

解决方案1 0 2014-06-06 02:57:27

解决方案1
0 2014-06-06 02:57:27