Bootstrap 通过 javascript 函数放在页面上时日期选择器不工作

Question

我在我的网页中实现了 Bootstrap 日期选择器。我正在使用 Bootstrap 作为 CSS 样式。使用bootstrap建议页面最后包含JQuery和BootstrapJS。但这样做会使 bootstrap 日期选择器出现故障。以下是我的页面的一个片段，通过它我可以使用日期选择器以及 bootstrap JS 的 bootstrap 下拉列表。

<head>
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
    <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen" href="https://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
        <link href="../css/bootstrap.css" rel="stylesheet"> 
        <script type="text/javascript" src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
        <script type="text/javascript"src="https://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js"></script>
    </head>
    <div class="btn-group pull-right">
                  <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle" aria-haspopup="true" aria-expanded="false">Dropdown&nbsp;&nbsp;<span class="glyphicon glyphicon-triangle-bottom"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span>&nbsp;&nbsp;About <b>1</b></a></li>
                        <li><a data-toggle="modal" data-target="#optionModal"><span class="glyphicon glyphicon-alert"></span>&nbsp;&nbsp;Report a Bug</a></li>
                        <li><a data-toggle="modal" data-target="#optionModal"><span class="glyphicon glyphicon-text-background"></span>&nbsp;&nbsp;Suggest Enhancement</a></li>
                        <li><a data-toggle="modal" data-target="#optionModal"><span class="glyphicon glyphicon-phone-alt"></span>&nbsp;&nbsp;Contact Us</a></li>
                    </ul>
            </div>
    <div class="container">
        <div id="questionblock">
            <div class= "customscrollbar" id="questiondiv">
                <div>
                    <button onclick="addtest();" class="btn btn-primary" style="margin-left:10px; margin-top:7px;"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;Add New Test</button>
                    <a type="button" class="btn btn-default" style="margin-left:10px; margin-top:7px;"><span class="glyphicon glyphicon-refresh"></span>&nbsp;&nbsp;Refresh</a>
                </div>
            </div>
        </div>
    </div>

<div id="displaymasterblock">
        <div class="alert alert-info fade in" id="addtestheader">
            <span class="glyphicon glyphicon-plus"></span>&nbsp;Add New Test
        </div>
        <em>&nbsp;&nbsp;&nbsp;All fields are mandatory</em>
            <form>
                <div class="form-inline">
                    <div id="formelements">
                        <label>1. Name of Test :</label>
                        <input type="text" class="form-control" id="testname" style="height:30px;" placeholder="Maximum 20 Characters">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <label>2. Scheduled on :</label>
                        <div id="datetimepicker" class="input-append date">
                        <input type="text" style="height:30px;" placeholder="Date & Time of Test"></input>
                        <span class="add-on" style="height:30px;">
                        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                        </span>
                          </div>
                        <script type="text/javascript">   //datepicker
                          $("#datetimepicker").datetimepicker({
                            format: "dd/MM/yyyy hh:mm:ss",
                            todayHighlight: true,
                            pick12HourFormat: true,
                            maskInput: true,
                          });
                        </script>
                    </div>
                </div>
                <div class="alert alert-info fade in" id="addtestheader" style="height:25px;font-size:15px;padding:2px;">
                    <span class="glyphicon glyphicon-user"></span>&nbsp;Select Target students for test
                </div>
                <div class="form-inline">
                    <div id="formelements">

                          <div class = "input-group">
                            <span class = "input-group-addon" style="width:40px;">3. Programme</span>
                            <select id="programme" name="programme" class="form-control" style="width:150px;" onchange="changeinprog();">
                              <option value="0" selected>Select One</option>
                            </select>
                            <span class = "input-group-addon">4. Branch</span>
                            <select id="branch" name="branch" class="form-control" onchange="changeofbranch();">
                              <option value="0">Select Programme</option>
                            </select>
                        </div>
                        <div class = "input-group" style="margin-top:10px;">
                            <span class = "input-group-addon" style="width:40px;">5. Semester</span>
                            <select id="semester" name="semester" class="form-control" style="width:150px;" onchange="changeinsemester();">
                              <option value="0">Select Programme</option>
                            </select>
                            <span class = "input-group-addon">6. Course</span>
                            <select id="course" name="course" class="form-control" style="width:270px;" >
                              <option value="0">Problem solving and programming skills</option>
                            </select>
                        </div>
                    </div>
                </div>
                <center>
                <div id="errordiv" style="width:400px;"></div>
                <button type="button" class="btn btn-success">Save</button>
                <button type="button" class="btn btn-default">Cancel</button>

                    </center>
                </form>

<script src="../js/bootstrap.min.js"></script>

<div id="displaymasterblock"> 内的标记已被缩小并用于 JS 函数中以在单击按钮时触发。下面是那个JS函数-

function addtest()
{
    var element = '<div class="alert alert-info fade in" id="addtestheader"><span class="glyphicon glyphicon-plus"></span>&nbsp;Add New Test</div><em>&nbsp;&nbsp;&nbsp;All fields are mandatory</em><form><div class="form-inline"><div id="formelements"><label>1. Name of Test :</label><input type="text" class="form-control" id="testname" style="height:30px;" placeholder="Maximum 20 Characters">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label>2. Scheduled on :</label><div id="datetimepicker" class="input-append date"><input type="text" style="height:30px;" placeholder="Date & Time of Test"></input><span class="add-on" style="height:30px;"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span></div><script type="text/javascript">$("#datetimepicker").datetimepicker({format: "dd/MM/yyyy hh:mm:ss",todayHighlight: true,pick12HourFormat: true});</script></div></div><div class="alert alert-info fade in" id="addtestheader" style="height:25px;font-size:15px;padding:2px;"><span class="glyphicon glyphicon-user"></span>&nbsp;Select Target students for test</div><div class="form-inline"><div id="formelements"><div class = "input-group"><span class = "input-group-addon" style="width:40px;">3. Programme</span><select id="programme" name="programme" class="form-control" style="width:150px;" onchange="changeinprog();"><option value="0" selected>Select One</option><option value="1">B.Tech</option><option value="2">M.Tech</option><option value="3">MCA</option><option value="4">M.Sc.</option></select><span class = "input-group-addon">4. Branch</span><select id="branch" name="branch" class="form-control" onchange="changeofbranch();"><option value="0">Select Programme</option></select></div><div class = "input-group" style="margin-top:10px;"><span class = "input-group-addon" style="width:40px;">5. Semester</span><select id="semester" name="semester" class="form-control" style="width:150px;" onchange="changeinsemester();"><option value="0">Select Programme</option></select><span class = "input-group-addon">6. Course</span><select id="course" name="course" class="form-control" style="width:270px;" ><option value="0">Problem solving and programming skills</option></select></div></div></div><center><div id="errordiv" style="width:400px;"></div><button type="button" class="btn btn-success">Save</button><button type="button" class="btn btn-default">Cancel</button></center></form>';
    document.getElementById('displaymasterblock').innerHTML = element;
}

aabove 函数的作用是将所有标记放入 <div id="displaymasterblock"> Datepicker 正在工作，即当日历和时钟图标直接包含在如上所示的标记中时，日历和时钟图标显示并正常运行，但是当我使用按钮单击显示相同的标记时，datepicker 停止运行.

请帮帮我。我相信外部资源包含顺序有问题但不确定。我希望我能正确解释自己。

Answer 1

完全删除要附加动态 html 内容的脚本标记。将动态元素添加到dom后，调用datepicker函数。所以像下面这样修改你的函数 -

  function addtest() {
      var element = '<div class="alert alert-info fade in" id="addtestheader"><span class="glyphicon glyphicon-plus"></span>&nbsp;Add New Test</div><em>&nbsp;&nbsp;&nbsp;All fields are mandatory</em><form><div class="form-inline"><div id="formelements"><label>1. Name of Test :</label><input type="text" class="form-control" id="testname" style="height:30px;" placeholder="Maximum 20 Characters">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label>2. Scheduled on :</label><div id="datetimepicker" class="input-append date"><input type="text" style="height:30px;" placeholder="Date & Time of Test"></input><span class="add-on" style="height:30px;"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span></div></div></div><div class="alert alert-info fade in" id="addtestheader" style="height:25px;font-size:15px;padding:2px;"><span class="glyphicon glyphicon-user"></span>&nbsp;Select Target students for test</div><div class="form-inline"><div id="formelements"><div class = "input-group"><span class = "input-group-addon" style="width:40px;">3. Programme</span><select id="programme" name="programme" class="form-control" style="width:150px;" onchange="changeinprog();"><option value="0" selected>Select One</option><option value="1">B.Tech</option><option value="2">M.Tech</option><option value="3">MCA</option><option value="4">M.Sc.</option></select><span class = "input-group-addon">4. Branch</span><select id="branch" name="branch" class="form-control" onchange="changeofbranch();"><option value="0">Select Programme</option></select></div><div class = "input-group" style="margin-top:10px;"><span class = "input-group-addon" style="width:40px;">5. Semester</span><select id="semester" name="semester" class="form-control" style="width:150px;" onchange="changeinsemester();"><option value="0">Select Programme</option></select><span class = "input-group-addon">6. Course</span><select id="course" name="course" class="form-control" style="width:270px;" ><option value="0">Problem solving and programming skills</option></select></div></div></div><center><div id="errordiv" style="width:400px;"></div><button type="button" class="btn btn-success">Save</button><button type="button" class="btn btn-default">Cancel</button></center></form>';
      document.getElementById('displaymasterblock').innerHTML = element;

      $("#datetimepicker").datetimepicker({
          format: "dd/MM/yyyy hh:mm:ss",
          todayHighlight: true,
          pick12HourFormat: true
      });

  }

Bootstrap 通过 javascript 函数放在页面上时日期选择器不工作

Bootstrap datepicker not working when put on page through a javascript function

javascript

jquery

twitter-bootstrap

bootstrap-datepicker

bootstrap-datetimepicker