jquery。表。打开新的时间选择器时取消上一个时间选择器

使用jQuery插件和timepicker插件。（来自此页面的自定义输入“时间选择器2:）

时间选择器插件覆盖“onblur cancel”功能，单击新的可编辑区域，将向页面添加另一个选择器，而不清除第一个选择器

以下是一个工作示例：

HTMl:

开始
终点
逝去
11:38
11:29
838:59:59
12:03
12:03
00:00:01
12:24
12:34
00:09:15
12:35
目前正在工作。。。。

JS:

var jamroom\u url='1〕http://www.earner.iixxii.cc';
/**
*这是用于使用表的可编辑时间。
*/
$（“.time”）。每个（函数（）{
$（此）。可编辑（已提交）{
指标：“”，
键入：“时间”，
提交：“OK”，
工具提示：“单击以编辑…”，
取消：“取消”，
id:$（this.attr（'id'））
});
});
/**
*这是扩展表，以返回多个值来更新经过的时间。
*从http://stackoverflow.com/questions/966539/how-to-get-out-of-jquery-jeditable-mess
*@param值
*@param设置
*/
提交的函数（值、设置）{
var edits=新对象（）；
var origvalue=this.revert；
var textbox=this；
var结果=价值；
编辑['value']=value；
编辑['id']=settings.id；
返回的变量=$.ajax({
url:jamroom_url+“/apTimetracker.php？mode=tracker&t=edit”，
类型：“POST”，
数据：编辑，
数据类型：“json”，
完成：功能（xhr、textStatus）{
var response=$.securevaljson（xhr.responseText）；
如果（response.success\u msg==“success”）{
警报（“已成功”）；
}
}
});
返回（结果）；
}

单击“开始”或“结束”列中的任意时间将时间更改为“可编辑”

我希望它的工作方式是，当单击新时间时，旧时间将返回到其未编辑状态。在

jquery.editable.js

函数中有一个取消操作

---

我想知道的是如何在单击新时间时直接调用它。

您可以为每个元素附加一个单击处理程序，以重置所有其他可编辑项：

$(".time").editable(submitEdit, {
    indicator: '<img src="' + jamroom_url + '/modules/apTrigger/images/spinner.gif">',
    type: 'time',
    submit: 'OK',
    tooltip: 'Click to edit...',
    cancel: 'cancel',
    id: $(this).attr('id'),
}).click(function() {
    var allEditables = $(this).closest('table').find('.time');
    $.each(allEditables.not($(this)).get(), function(i, elm) {
        elm.reset();
    });
});

$（“.time”）。可编辑（提交）{
指标：“”，
键入：“时间”，
提交：“OK”，
工具提示：“单击以编辑…”，
取消：“取消”，
id:$（this.attr（'id'），
})。单击（函数（）{
var allEditables=$（this）.closest（'table'）.find（'.time'）；
$.each（allEditables.not（$（this））.get（），函数（i，elm）{
elm.reset（）；
});
});

请参阅更新的jsfiddler：

var jamroom_url = 'http://www.earner.iixxii.cc';
/**
 * this is for the editable times using jeditable.
 */
$(".time").each(function () {
    $(this).editable(submitEdit, {
        indicator: '<img src="' + jamroom_url + '/modules/apTrigger/images/spinner.gif">',
        type: 'time',
        submit: 'OK',
        tooltip: 'Click to edit...',
        cancel: 'cancel',
        id: $(this).attr('id')
    });
});

/**
 * and this is extending jeditable to return multiple values to update the elapsed time too.
 * from http://stackoverflow.com/questions/966539/how-to-get-out-of-jquery-jeditable-mess
 * @param value
 * @param settings
 */
function submitEdit(value, settings) {
    var edits = new Object();
    var origvalue = this.revert;
    var textbox = this;
    var result = value;
    edits['value'] = value;
    edits['id'] = settings.id;
    var returned = $.ajax({
        url: jamroom_url + "/apTimetracker.php?mode=tracker&t=edit",
        type: "POST",
        data: edits,
        dataType: "json",
        complete: function (xhr, textStatus) {
            var response = $.secureEvalJSON(xhr.responseText);
            if (response.success_msg == 'success') {
                alert('was successful');
            }
        }
    });
    return (result);
}

$(".time").editable(submitEdit, {
    indicator: '<img src="' + jamroom_url + '/modules/apTrigger/images/spinner.gif">',
    type: 'time',
    submit: 'OK',
    tooltip: 'Click to edit...',
    cancel: 'cancel',
    id: $(this).attr('id'),
}).click(function() {
    var allEditables = $(this).closest('table').find('.time');
    $.each(allEditables.not($(this)).get(), function(i, elm) {
        elm.reset();
    });
});