[英]jQuery Datepicker doesn't overwrite value in dynamically created input, page refresh needed
EDIT1:
所以我設法解決了這個問題。 但是我不確定如何。 由於不同的原因,我一直在使用兩個具有不同ID的相同表單(添加和編輯表單)。 在那些表格中,我輸入了帶有ID的信息。 但是對於這兩種形式,我一直在使用相同的ID作為輸入。 因此,我將這些ID更改為類(應該如何)。 我認為這是該錯誤的原因。
我更改的第二件事是立即刪除第二個表單(單擊編輯表單/按鈕),因為這很麻煩,我沒有在這里添加麻煩,我也不認為這很麻煩與我最初的問題有關。 只要寫我在任何情況下所做的一切。
我在使用jQuery Datepicker和Timepicker時遇到問題。 我將盡力描述我的處境。
我已經為本地存儲值動態創建了html(可以想象其中包含自己的數據的正方形。)
我的問題...如果我只是加載這些正方形,並且想要通過單擊“編輯”按鈕來更改某些內容,它將通過單擊這些輸入之一來創建一個包含預寫值的表單,並顯示一個日歷。 然后,在單擊某個日期后,預寫的值將隨着我單擊的日期的值而更改。 時間選擇器也一樣。 但! 有一個問題。
如果我想用新數據創建新方塊(通過使用輸入動態創建表單,那么數據將保存到本地存儲中),然后(無需刷新頁面)單擊“編輯”按鈕,帶來相同的舊表單(如上所述),然后單擊某些輸入,將顯示日歷,但是單擊某個日期后,輸入的值不會更改。 與Timepicker相同,不會覆蓋pre-witten值。
但是,如果我刷新頁面並要編輯某些內容(而不創建新的正方形/數據),則Datepicker可以毫無問題地更改值。
你能幫我嗎? 如果需要,我將嘗試回答任何問題。
這是一個顯示所有保存在本地存儲中的功能。
function fetchBookmarks() {
var bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
bookmarks.sort(function compare(a, b) {
var dateA = new Date(a.date);
var dateB = new Date(b.date);
return dateB - dateA;
});
var results = document.getElementById("results");
results.innerHTML = "";
for (var i = 0; i < bookmarks.length; i++) {
var date = bookmarks[i].date;
var distance = bookmarks[i].distance;
var time = bookmarks[i].time;
results.innerHTML += '<div class="bookmarks shadow p-3 m-2 bg-light rounded">' +
'<div class="row">' +
'<div class="col">' +
'<h3>Date: </h3>' +
'<h3>Distance: </h3>' +
'<h3>Time: </h3>' +
'</h3><input onclick="editBookmarks(\'' + time + '\')" class="btn btn-outline-primary mr-1 btn-lg" id="edit" type="button" value="Edit"><input onclick="deleteBookmarks(\'' + time + '\')" class="btn btn-outline-danger btn-lg" id="deleteBookmarks" type="button" value="Delete">' +
'</div>' +
'<div class="col">' +
'<h3 class="font-weight-bold">' + date + '</h3>' +
'<h3 class="font-weight-bold">' + distance + '</h3>' +
'<h3 class="font-weight-bold">' + time + '</h3>'
'</div>' +
'</div>' +
'</div>';
};
};
這是點擊編輯按鈕后的功能...
function editBookmarks(time) {
var bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
for (var i = 0; i < bookmarks.length; i++) {
if (bookmarks[i].time == time) {
$(".bookmarks").hide();
results.innerHTML += '<form class="bookmarks shadow p-3 m-2 bg-light rounded" id="editForm">' +
'<h4>Date: </h4><input class="form-control form-control-lg" id="date" placeholder="Select" value="' + bookmarks[i].date + '" type=""><br>' +
'<h4>Distance: </h4><input class="form-control form-control-lg" id="distance" placeholder="In miles" value="' + bookmarks[i].distance + '" type="text"><br>' +
'<h4>Time: </h4><input class="form-control form-control-lg" id="time" placeholder="Select" value="' + bookmarks[i].time + '" type=""><br>' +
'<input class="btn btn-success btn-lg" type="submit" value="Submit">' +
'</form>';
/* $('#date').datepicker()
$('#time').timepicker({
timeFormat: "H:mm",
hourMin: 0,
hourMax: 4
}); */
bookmarks.splice(i, 1);
};
};
$("#editForm").on("submit", function (e) {
var date = $("#date").val();
var distance = $("#distance").val();
var time = $("#time").val();
if (!distance.length || !date.length || !time.length) {
alert("Something missing!")
} else {
var bookmark = {
date: date,
distance: distance,
time: time
};
bookmarks.push(bookmark);
localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
fetchBookmarks();
$("#editForm").hide();
};
e.preventDefault();
});
$("#search").hide();
};
這是帶有時間選擇器的Datepicker
$('body').on('focus', "#date", function () {
$(this).datepicker();
});
$('body').on('focus', "#time", function () {
$(this).timepicker({
timeFormat: "H:mm",
hourMin: 0,
hourMax: 4
});
});
我知道這是很多問題,我在表達方面存在問題。 我只是迷路了。
感謝您的幫助。
這是GitHub文件的鏈接,我認為這比在此處發布代碼要好。 如果您有興趣,我的整個問題在文件的底部。
https://github.com/ovy1448/MyRun/blob/master/js/main.js
再次感謝。
根據我的理解,由於您使用onfocus事件來附加日期選擇器/時間選擇器,因此日期選擇器/時間選擇器的所有事件都未附加到該字段。 2-3年前,我遇到了類似的問題。 我所做的是為datepicker onSelect事件添加了一個函數,該函數更新了字段值。 您可以嘗試使用此方法(如下所示),讓我知道是否可行
$('body').on('focus', "#date", function () { $(this).datepicker({onSelect: function(dateStr){ $('body').('#date').val(dateStr); }}); }); $('body').on('focus', "#time", function () { $(this).timepicker({ timeFormat: "H:mm", hourMin: 0, hourMax: 4, onSelect: function(timeStr){ $('body').('#time').val(timeStr); } }); });
所以我設法解決了這個問題。 但是我不確定如何。 由於不同的原因,我一直在使用兩個具有不同ID的相同表單(添加和編輯表單)。 在那些表格中,我輸入了帶有ID的信息。 但是對於這兩種形式,我一直在使用相同的ID作為輸入。 因此,我將這些ID更改為類(應該如何)。 我認為這是該錯誤的原因。
我更改的第二件事是立即刪除第二個表單(單擊編輯表單/按鈕),因為這很麻煩,我沒有在這里添加麻煩,我也不認為這很麻煩與我最初的問題有關。 只要寫我在任何情況下所做的一切。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.