jQuery Datepicker 不会覆盖动态创建的输入中的值，需要刷新页面

Question

编辑1：
所以我确实设法解决了这个问题。但我不确定如何。 我一直在使用两个相同的表格，不同的 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();
};

这里是带时间选择器的日期选择器

$('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
再次感谢。

Answer 1

据我了解，由于您使用 onfocus 事件来附加 datepicker/timepicker，因此 datepicker/timepicker 的所有事件都不会附加到该字段。 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);
    }
});
});

Answer 2

所以我确实设法解决了这个问题。但我不确定如何。由于不同的原因（添加和编辑表单），我一直在使用两个具有不同 ID 的相同表单。在这些表格中，我输入了 ID。但是对于这两种形式，我一直在使用相同的 ID 作为它们的输入。所以我将这些 ID 更改为类（应该如何）。我认为这是错误的原因。
我改变的第二件事是立即删除第一个表单我会点击第二个表单（编辑表单/按钮），因为这很麻烦，我没有在这里解决问题，我不认为它与我最初的问题有关。随便写下我所做的一切。