Question

我正在尝试模拟SPA应用程序，将内容注入我的页面的中央块，而不是在我的网站上加载整个页面。但是，当我在其中一次注射中使用日期选择器时，日历不会显示。

我根据我选择的页面部分加载中心内容，我将它们上传到general.js文件，使用JQuery.load将html和js加载到我页面的新部分。

在index.jade中，我在node.js中有第一个页面（唯一加载的页面）：

doctype html
  html
   head
meta(http-equiv="Content-Type", content="text/html; charset=utf-8")
meta(http-equiv="X-UA-Compatible", content="IE=edge")
title Planet
base(href='/')
meta(name='viewport', content='width=device-width, initial-scale=1')
link(rel='icon', type='image/x-icon', href='favicon.ico')
//link(id="template-file", href="views/modals.html", rel="import") 
link(href="AdminLTE-2.3.11/dist/css/AdminLTE.min.css", type="text/css", rel="stylesheet")
link(href="AdminLTE-2.3.11/dist/css/skins/_all-skins.min.css", rel="stylesheet")
link(href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css', rel='stylesheet')
link(href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css", rel="stylesheet")
link(href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css", rel="stylesheet")
script(type='text/javascript', src='https://code.jquery.com/jquery-1.11.3.min.js')
script(type="text/javascript", src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js")
link(rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css")
link(href='css/mis_estilos.css', rel='stylesheet')

script.
  $(document).ready(function(){
  var date_input=$('input[name="date"]'); //our date input has the name "date"
  var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
  var options={
  format: 'mm/dd/yyyy',
  container: container,
  todayHighlight: true,
  autoclose: true,
  };
  date_input.datepicker(options);
  })

body

.container
  .row
    include ./../public/views/header.html
  br
  br

  .row#bloque_central
    .row#contenido_central


 include ./../public/views/footer.html

footer.html：

<div id="scripts_footer"></div>
 <script 
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
 </script>
 <script src="../AdminLTE-2.3.11/dist/js/app.min.js"></script>
 <script src="js/general.js"></script>

我的新页面提示：

<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">

<!-- Form code begins -->
<form method="post">
  <div class="form-group"> <!-- Date input -->
    <label class="control-label" for="date">Date</label>
    <input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/>
  </div>
  <div class="form-group"> <!-- Submit button -->
    <button class="btn btn-primary " name="submit" type="submit">Submit</button>
  </div>
 </form>
 <!-- Form code ends --> 

</div>
</div>    
</div>
</div>

我已经尝试过几个方法，例如在新部分的js中初始化datepicker，但它仍然没有显示

在我的项目

0 个答案: