JQuery 动态加载时 Datetimepicker 不工作

Question

我在以下情况下无法让日期时间选择器完全加载：它将元素添加到页面，但单击日历图标的功能与第一组不同。我是网页制作的新手，要温柔

这是 jsfiddle：https://jsfiddle.net/gq8a7k14/

前 2 个日期时间选择器工作正常，当您单击添加按钮时，会添加一个新集合，但它们不起作用。

<?php

?>

<html>
<head>
<title>SubmitYourTime</title>
<link href='assets/css/phppot-style.css' type='text/css' rel='stylesheet' />
<link rel='stylesheet' type='text/css' 
href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap- 
datetimepicker/4.17.42/css/bootstrap-datetimepicker.min.css'>
<style type='text/css'>
    .container {
        margin-top: 40px;
    }
    .btn-primary {
        width: 100%;
    }
</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 
<script type="text/javascript" src="https://momentjs.com/downloads/moment.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 


<script type='text/javascript'>
    $( document ).ready(function() {
        $('#datetimepicker0s').datetimepicker();
        $('#datetimepicker0e').datetimepicker();
        $('.add').on('click', add);
        $('.remove').on('click', remove);

    });
    function add() {
            
          var new_chq_no = parseInt($('#total_chq').val()) + 1;
          $("#datetimepicker" + new_chq_no + "s").datetimepicker();
          $("#datetimepicker" + new_chq_no + "e").datetimepicker();
          var new_input = "<div class='row'>    <div class='col-md-6'>  <div class='form-group'>        <label class='control-label'>Start Time</label>     <div class='input-group date' name='dtp" + new_chq_no + "s' id='datetimepicker" + new_chq_no + "s'>     <input type='text' class='form-control' />          <span class='input-group-addon'>        <span class='glyphicon glyphicon-calendar'>  </span>    </span> </div>  </div>              </div>      <div class='col-md-6'>                 <div class='form-group'>                   <label class='control-label'>End Time</label>   <div class='input-group date' name='dtp" + new_chq_no + "e' id='datetimepicker" + new_chq_no + "e'>                    <input type='text' class='form-control' />          <span class='input-group-addon'>    <span class='glyphicon glyphicon-calendar'></span>  </span>  </div>                   </div>               </div>  </div>";
        
          $('#new_chq').append(new_input);
          $('#total_chq').val(new_chq_no);
        }

    function remove() {
          var last_chq_no = $('#total_chq').val();

          if (last_chq_no > 1) {
            $('#new_' + last_chq_no).remove();
            $('#total_chq').val(last_chq_no - 1);
          }
        }
</script>

</head>
<body>

<div class='container'>
<div class='panel panel-primary'>
  <div class='panel-heading'>Enter Your Time</div>
  <div class='panel-body'>
  <div id='new_chq'>
     <div class='row'>
        <div class='col-md-6'>
           <div class='form-group'>
              <label class='control-label'>Start Time</label>
              <div class='input-group date' name='dtp0s' id='datetimepicker0s'>
                 <input type='text' class='form-control' />
                 <span class='input-group-addon'>
                 <span class='glyphicon glyphicon-calendar'></span>
                 </span>
              </div>
           </div>
        </div>
        <div class='col-md-6'>
           <div class='form-group'>
              <label class='control-label'>End Time</label>
              <div class='input-group date' name='dtp0e' id='datetimepicker0e'>
                 <input type='text' class='form-control' />
                 <span class='input-group-addon'>
                 <span class='glyphicon glyphicon-calendar'></span>
                 </span>
              </div>
           </div>
        </div>
     </div>
     </div>
     <input type='hidden' value='1' id='total_chq'>
     <button class='add'>Add Time</button>
             
     <br></br>
     <input type='submit' class='btn btn-primary' value='Submit'>

</div>
</div>
    
</body>
</html>

Answer 1

您需要在 datepicker() 附加到页面后对其进行初始化，目前当您尝试对其进行初始化时，选择器未找到任何内容。

modified fiddle

原创

function add() {
                
              var new_chq_no = parseInt($('#total_chq').val()) + 1;
              $("#datetimepicker" + new_chq_no + "s").datetimepicker();
              $("#datetimepicker" + new_chq_no + "e").datetimepicker();
              var new_input = "<div class='row'>    <div class='col-md-6'>  <div class='form-group'>        <label class='control-label'>Start Time</label>     <div class='input-group date' name='dtp" + new_chq_no + "s' id='datetimepicker" + new_chq_no + "s'>     <input type='text' class='form-control' />          <span class='input-group-addon'>        <span class='glyphicon glyphicon-calendar'>  </span>    </span> </div>  </div>              </div>      <div class='col-md-6'>                 <div class='form-group'>                   <label class='control-label'>End Time</label>   <div class='input-group date' name='dtp" + new_chq_no + "e' id='datetimepicker" + new_chq_no + "e'>                    <input type='text' class='form-control' />          <span class='input-group-addon'>    <span class='glyphicon glyphicon-calendar'></span>  </span>  </div>                   </div>               </div>  </div>";
            
              $('#new_chq').append(new_input);
              $('#total_chq').val(new_chq_no);
            }

已修改

function add() {
                
              var new_chq_no = parseInt($('#total_chq').val()) + 1;
              var new_input = "<div class='row'>    <div class='col-md-6'>  <div class='form-group'>        <label class='control-label'>Start Time</label>     <div class='input-group date' name='dtp" + new_chq_no + "s' id='datetimepicker" + new_chq_no + "s'>     <input type='text' class='form-control' />          <span class='input-group-addon'>        <span class='glyphicon glyphicon-calendar'>  </span>    </span> </div>  </div>              </div>      <div class='col-md-6'>                 <div class='form-group'>                   <label class='control-label'>End Time</label>   <div class='input-group date' name='dtp" + new_chq_no + "e' id='datetimepicker" + new_chq_no + "e'>                    <input type='text' class='form-control' />          <span class='input-group-addon'>    <span class='glyphicon glyphicon-calendar'></span>  </span>  </div>                   </div>               </div>  </div>";
            
              $('#new_chq').append(new_input);
              $('#total_chq').val(new_chq_no);

              $("#datetimepicker" + new_chq_no + "s").datetimepicker();
              $("#datetimepicker" + new_chq_no + "e").datetimepicker();
            }

JQuery 动态加载时 Datetimepicker 不工作

JQuery Datetimepicker not working when loaded dynamically

html

javascript

jquery

datetimepicker