Javascript 用于日期选择器的jQuery内联编辑

在我的页面上，有多个地方的日期字段呈现如下； 因此，某些日期始终显示在可编辑的文本框中，而其他日期则显示为标签（然后进行内联编辑）

由于类datePicker有多个元素…如何确保仅在单击类为“editableDateTxt”的div元素时显示datePicker

---

试选代码

我更新了下面的代码，但在select上什么也没有发生（我甚至尝试在onSelect中添加一个警报，但它没有触发）

$（父）.find（'.datePicker'）.datePicker（）.datePicker({
onSelect：功能（日期）{
parent.append（$（“”）.html（date））；
$（this.remove（）；
}
}).日期选择器（“显示”）；

不确定我是否100%理解您的问题。但不仅仅是使用

$（this.find（）

解决您的问题。见下文：

$（文档）.on（“单击“，”.editableDateTxt”，函数（）{ 变量输入=$（“”，{'type'：'text'，'class'：'datePicker'，'value'：$（this.html（）}）； $（this.parent（）.append（输入）； $（this.remove（）； input.focus（）； $（this.find（'.datePicker'）.datePicker（）.datePicker（'show'）； });

我重读了你的密码。存储对父对象的引用并使用该引用进行搜索怎么样

$(document).on("click",".editableDateTxt", function () {
    var input = $('<input />', {'type': 'text', 'class':'datePicker', 'value': $(this).html()});
    var parent = $(this).parent();
    parent.append(input);
    $(this).remove();
    input.focus();
    $(parent).find('.datePicker').datepicker().datepicker('show');
});

一开始我没注意到

---

回应您关于关闭日期选择器并仅显示所选日期的评论。最好的方法是使用日期选择器中的

onSelect

选项。像这样：

parent.find('.datePicker').datepicker({
    onSelect: function(date) {
        parent.append($("<div class='editableDateTxt'/>").html(date));
        $(this).remove();
    }
}).datepicker('show');

parent.find（'.datePicker'）.datePicker({
onSelect：功能（日期）{
parent.append（$（“”）.html（date））；
$（this.remove（）；
}
}).日期选择器（“显示”）；

请参阅以下工作指南：

---

因此，您的整个JS变成：

$(document).on("click",".editableDateTxt", function () {
    var input = $('<input />', {'type': 'text', 'class':'datePicker', 'value': $(this).html()});
    var parent = $(this).parent();
    parent.append(input);
    $(this).remove();
    input.focus();
    parent.find('.datePicker').datepicker({
        onSelect: function(date) {
            parent.append($("<div class='editableDateTxt'/>").html(date));
            $(this).remove();
        }
    }).datepicker('show');
});

$（document）.on（“单击“，”.editableDateTxt”，函数（）{
变量输入=$（“”，{'type'：'text'，'class'：'datePicker'，'value'：$（this.html（）}）；
var parent=$（this.parent（）；
parent.append（输入）；
$（this.remove（）；
input.focus（）；
parent.find（'.datePicker'）.datePicker({
onSelect：功能（日期）{
parent.append（$（“”）.html（date））；
$（this.remove（）；
}
}).日期选择器（“显示”）；
});

而不是

$('.datePicker').datepicker().datepicker('show'); 

尝试：

input.datepicker().datepicker('show');

---

如果我误解了您的问题，您能创建一个来演示它吗？您似乎很了解…但问题是$（this）.find（'.datePicker'）无法获取所选元素…可能是因为我使用$（this）.remove（）；above@testndtv很抱歉我现在意识到我误读了你的一些代码。我再看一看。@testndtv添加了另一种可能的解决方案。让我知道如果它不适合你的html虽然。嘿…thx很多…代码现在工作良好…有独特的父元素…这将是伟大的，如果你可以帮助我在一件事。。。

input.datepicker().datepicker('show');

parent.find('.datePicker').datepicker({
    onSelect: function(date) {
        parent.append($("<div class='editableDateTxt'/>").html(date));
        $(this).remove();
    }
}).datepicker('show');

$(document).on("click",".editableDateTxt", function () {
    var input = $('<input />', {'type': 'text', 'class':'datePicker', 'value': $(this).html()});
    var parent = $(this).parent();
    parent.append(input);
    $(this).remove();
    input.focus();
    parent.find('.datePicker').datepicker({
        onSelect: function(date) {
            parent.append($("<div class='editableDateTxt'/>").html(date));
            $(this).remove();
        }
    }).datepicker('show');
});

$('.datePicker').datepicker().datepicker('show'); 

input.datepicker().datepicker('show');