0
私は、ビューアがページにテキスト入力を追加できるようにするボタンがあるHTMLフォームを持っています。それはうまく動作します。しかし、私の問題は、追加のテキスト入力がdatepickerフィールドである必要があります。しかし、最初のdatepickerフィールドだけが動作します（クリックするとカレンダーがポップアップします）。一度追加しても動作しないようです。ここでウェブページ上の複数のjquery 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>
すべてのエラーを？また、日付ピッカーの作成でそれぞれを使用する必要はありません。 – j08691
あなたのコードをコピー＆ペーストしてローカルで実行し、入力に集中したときのように日付ピッカーを動作させます。 – Vcasso
しかし、「フィールドを追加」ボタンをクリックし、2番目のテキスト入力をクリックすると、カレンダーは表示されませんか？ – Jayreis