Question

我有一个html表单，其中有一个按钮，使查看器可以向页面添加更多文本输入。工作正常。但是我的问题是其他文本输入需要是datepicker字段。但是只有第一个datepicker字段才有效（点击时会弹出日历）。这些额外的一次似乎都没有用吗？

这是我的代码

<!DOCTYPE html>
    <html lang="en">
     <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title></title>

  <!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="css/starter-template.css" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>

 </head>
 <body>

   <nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
    <a class="navbar-brand" href="dashboard.php"><img src="img/logo.png" alt="" style="margin-top:-10px"></a>
  <ul class="nav navbar-nav">
    <li class="nav-item"><a class="nav-link" href="dashboard.php">Dashboard</a></li>
    <li class="nav-item"><a class="nav-link" href="myprofile.php">My Profile</a></li>
    <li class="nav-item"><a class="nav-link" href="stafflisting.php">Staff Listing</a></li>
     <li class="nav-item"><a class="nav-link" href="customerslisting.php">Customer Listing</a></li> 
    <li class="nav-item"><a class="nav-link" href="logout.php">Logout</a>   </li>
    </ul>    </nav>

<div class="container">

 <div class="row">
    <div class="col-md-12"><h2>Data Upload</h2><br /></div>
 </div>
 <form method="POST" action="" enctype="multipart/form-data">
    <input type="hidden" name="dapassword" value="576de">
            <div class="row">
        <div class="col-md-12"><br />
            <input type="submit" name="saveit" value="Save" class="btn btn-primary pull-right">
        </div>
    </div>
    <div class="row">
       <div class="input_fields_wrap">
          <button class="add_field_button">Add More Fields</button>
       <div>
    </div>
    <div class="row">
        <div class="col-md-6">
           <label>Mail Date</label>
           <input type="text" name="dropdate[]" class="dropdate form-control">
        </div>
        <div class="col-md-6">
             <label>Import zip file</label>
             <input type="file" name="datfile" id="datfile">
        </div>
    </div>
<script>
        $(document).ready(function() {
        var max_fields      = 10; //maximum input boxes allowed
        var wrapper         = $(".input_fields_wrap"); //Fields wrapper
        var add_button      = $(".add_field_button"); //Add button ID

        var x = 1; //initlal text box count
        $(add_button).click(function(e){ //on add input button click
            e.preventDefault();
            if(x < max_fields){ //max input box allowed
                x++; //text box increment
                $(wrapper).append('<div class="row"><div class="col-md-6"><label>Mail Date</label><input type="text" name="dropdate[]" class="dropdate form-control"/></div><div class="col-md-6"><a href="#" class="remove_field">Remove</a></div></div>'); //add input box
            }
        });

        $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
            e.preventDefault(); $(this).parent('div').remove(); x--;
        })
    });
</script>


    </form>

</div>
</div>

 </div><!-- /.container -->


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
      <link rel="stylesheet" type="text/css"
    href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
      <script type="text/javascript">
          $('.dropdate').each(function(){
          $(this).datepicker();
        });
      </script>
  </body>
</html>

Answer 1

添加新元素时，您还需要确保在这些新元素上添加datepicker：

$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment
        $(wrapper).append('<div class="row"><div class="col-md-6"><label>Mail Date</label><input type="text" name="dropdate[]" class="dropdate form-control"/></div><div class="col-md-6"><a href="#" class="remove_field">Remove</a></div></div>'); //add input box
        $('.dropdate').datepicker()
    }
});

网页上的多个jquery datepicker无法正常工作

1 个答案: