Question

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

<div class="editableDateTxt" title="06/04/2014">06/04/2011</div>
<input type="text" value="" placeholder="mm/dd/yyyy" name="date1" id="date1" class="datePicker">
<input type="text" value="" placeholder="mm/dd/yyyy" name="date2" id="date2" class="datePicker">

<div class="editableDateTxt" title="06/04/2014">06/04/2012</div>
<input type="text" value="" placeholder="mm/dd/yyyy" name="date3" id="date3" class="datePicker">

<div class="editableDateTxt" title="06/04/2014">06/04/2013</div>
<input type="text" value="" placeholder="mm/dd/yyyy" name="date4" id="date4" class="datePicker">

现在我需要实现内联编辑...即。单击标签时，我想显示jQuery UI日期选择器和模糊，我想隐藏...

所以我使用下面的代码;

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

                $(document).on("blur",".datePicker", function () {
                        $(this).parent().append($("<div class='editableDateTxt'/>").html($(this).val()));
                        $(this).remove();
                });

然而，这条线似乎存在问题;

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

因为有多个带有类datePicker的元素...如何确保仅在单击带有“editableDateTxt”类的div元素的地方显示datepicker？

尝试选择代码

我更新了下面的代码，但select上没有任何反应（我甚至尝试在onSelect中添加一个警告，但它不会触发）

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

Answer 1

不确定我是否100％了解您的问题。但是，不会只使用$(this).find()来解决您的问题。见下文：

<击> $（document）.on（＆＃34; click＆＃34;，＆＃34; .editableDateTxt＆＃34;，function（）{ var input = $（＆＃39;＆＃39;，{＆＃39; type＆＃39;：＆＃39; text＆＃39;，＆＃39; class＆＃39;：＆＃39; datePicker＆＃39; ，＆＃39;价值＆＃39;：$（this）.html（）}）; $（本）.parent（）追加（输入）; $（这）一个.remove（）; input.focus（）; $（本）.find（＆＃39; .datePicker＆＃39;）。日期选择器（）日期选择器（＆＃39;秀＆＃39;）。 }）;

<击>

我重新阅读了你的代码。如何存储对父项的引用并使用它来搜索。

$(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');
});

或者所有元素共享同一个父元素。有点不确定，因为你的JS似乎建议了独特的父元素，但你的HTML并没有。您可能没有包含所有HTML。

当然，只使用输入变量也可以：

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

一开始没注意到那个。

回复关于关闭日期选择器并仅显示所选日期的评论。最好的方法是在datepicker中使用onSelect选项。像这样：

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

请参阅此工作jsfiddle：http://jsfiddle.net/6pptH/

所以你的整个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');
});

Answer 2

而不是

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

尝试：

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

日期选择器的jQuery内联编辑

2 个答案:

<击>