Pomoc w programowaniu, odpowiedzi na pytania / JavaScript / Dodawanie datepicker do dynamicznie dodawanych znaczników HTML - javascript, jquery, html, datepicker

Dodawanie datepicker do dynamicznie dodawanych elementów div HTML - javascript, jquery, html, datepicker

Tworzę plik HTML, który ma przycisk, aby dynamicznie dodawać nowe divy. div ma etykietę i dwa pola wejściowe. Jedno z pól wejściowych ma przypisany datepicker JQuery.

Mam dwa dodatkowe div utworzone, ale sąukryty za pomocą CSS. Jedna z nich jest używana do tworzenia klonów przy użyciu JQuery. Tworzę klony tego div, aby dodawać je dynamicznie po kliknięciu przycisku. Drugi div jest używany do poprawnego umieszczania dynamicznie tworzonych div. Oznacza to, że wszystkie div uzyskiwane dynamicznie są umieszczane wcześniej.

To jest mój kod.

 <!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- for date picker -->

<!-- Load jQuery from Google"s CDN -->
<!-- Load jQuery UI CSS  -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<!-- Load jQuery JS -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<!-- Load jQuery UI Main JS  -->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>


<script>
$(function() {
$(".dpick").datepicker();
});
</script>

<!-- /for date picker -->

</head>
<body>
<div id="onBookingDiv">
<label id="Paylbl0">Payment No 0: </label>
<input type="text"  style="width: 30%;" class="dpick" id="dpick0" >
<input type="number" style="width: 30%;" id="amount0">
</div>
<div id="Pay1Div">
<label id="Paylbl1">Payment No 1: </label>
<input type="text"  style="width: 30%;" class="dpick" id="dpick1">
<input type="number" style="width: 30%;" id="amount1">
</div>
<div id="Pay2Div">
<label id="Paylbl2">Payment No 2: </label>
<input type="text"  style="width: 30%;" class="dpick" id="dpick2">
<input type="number" style="width: 30%;" id="amount2">
<button type="button" onclick="AddNew()">Add New</button>
</div>

<!-- this div is used to correctly place the cloned div -->

<div id="placeDiv" style="display: none">
<label>Plcment No x: </label>
<input type="text"  style="width: 30%;" class="dpick">
<input type="number" style="width: 30%;" >
</div>

<!-- /this div is used to correctly place the cloned div -->

<!-- this div is used to make the clone -->

<div id="makeCloneID" class="makeCloneClass" style="display: none">
<label class="lbl">Payment No x: </label>
<input type="text"  style="width: 30%;" class="dpick">
<input type="number" style="width: 30%;">
</div>

<!-- /this div is used to make the clone -->


<script>
var i = 3;
function AddNew() {

var cloned = $("#makeCloneID").clone(true);
cloned.css({"display": "block"});

var noOfDivs = $(".makeCloneClass").length + 2;

cloned.attr("id", "Pay" + noOfDivs + "Div");
cloned.find("label").attr("id", "PayLbl" + noOfDivs);
cloned.find("input[type="text"]").attr("id", "dpick"+ noOfDivs);
cloned.find("input[type="number"]").attr("id", "amount"+ noOfDivs);

cloned.find(".lbl").html("Payment No " + i++ + ":");

cloned.insertBefore("#placeDiv");
}
</script>


</body>
</html>

Problemy są

Po utworzeniu i umieszczeniu pierwszego klonu (w tym przypadku Płatności nr 3), po kliknięciu pola wprowadzania, aby wprowadzić datę, nie mogę tam wprowadzić daty, mimo że kalendarz jest wyświetlany.
Po utworzeniu drugiego klonu (w tym przypadku tworzona jest płatność nr 4), dzień, który został wybrany we wcześniejszym etapie, jest już umieszczony w polu.
Wszystkie pozostałe div, sklonowane po powyższych krokach, zajmują tę samą datę, która została wybrana we wcześniejszym kroku.

Jeśli możesz być na tyle uprzejmy, aby uruchomić mój kod, zobaczysz, jakie są problemy. Trochę trudno je opisać.

Czy mógłbyś wskazać, jaki jest błąd w moim kodzie i jak go naprawić?

Odpowiedzi:

1 dla odpowiedzi № 1

problem polega na tym, że kiedy klonujesz datepicker, wtedy zamknięcie jest odnoszone do oryginału, więc jeśli zmienisz datę, data na oryginale zostanie zaktualizowana.

Rozwiązałem twój problem z tym:

    <!-- this div is used to make the clone -->

<div id="makeCloneID" class="makeCloneClass" style="display:none;">
<label class="lbl">Payment No x: </label>
<input type="text" class="dontUseDPickClass" style="width: 30%;">
<input type="number" style="width: 30%;">
</div>

<!-- /this div is used to make the clone -->

Spójrz na class = "dontUseDPickClass" więc nie inicjuje datepicker z klonowanego, a następnie:

function AddNew() {
var cloned = $("#makeCloneID").clone(true);
cloned.css({"display": "block"});

var noOfDivs = $(".makeCloneClass").length + 2;

cloned.attr("id", "Pay" + noOfDivs + "Div");
cloned.find("label").attr("id", "PayLbl" + noOfDivs);
cloned.find("input[type="text"]").attr("id", "dpick"+ noOfDivs);
cloned.find("input[type="number"]").attr("id", "amount"+ noOfDivs);
cloned.find(".lbl").html("Payment No " + i++ + ":");


cloned.insertBefore("#placeDiv");

//Init the datepicker:
$("#dpick"+ noOfDivs).datepicker();
}

Inicjalizuj każdy datepicker jeden po drugim.

Tutaj to działa:

http://jsfiddle.net/1ezos4ho/1/

pozdrowienia