Jquery ui jqueryui时间选择器&；drupal'；s可编辑字段模块

我遇到了javascript工具之间的冲突，我对javascript的知识还不足以解决这个问题

我使用drupal的editablefields模块允许用户在节点视图中内联编辑字段，就像在节点/%/edit中编辑字段一样

结合这一点，我使用的是弗朗索瓦·盖利纳（François Gélinas）的jquery ui时间选择器：

我遇到的问题是，最初调用时，时间选择器绑定到dom元素，例如：

#edit-field-days-start-time-und-0-value 

使用如下代码：

$('#edit-field-days-start-time-und-0-value').timepicker();

#edit-field-days-start-time-und-0-value-1

这非常有效，当用户点击字段时，时间选择器弹出，他们可以点击一个新的小时，它将更新字段。但一旦更新发生，drupal的editablefields模块就会更新字段并将字段id更改为如下内容：

$('#edit-field-days-start-time-und-0-value').timepicker();

#edit-field-days-start-time-und-0-value-1

现在，jquery ui时间选择器不再绑定到存在的元素，因此，如果用户单击小部件中的第二个按钮（例如分钟），我会得到一个错误：

uncaught exception: Missing instance data for this timepicker

---

所以我的问题是，如何强制将计时器重新绑定到新ID？或者，我如何阻止drupal editablefields模块保存更新并更改字段id，直到编辑完成？

找到了答案，有点老套，但它可以工作，也许有一天会有人发现这一点

// global timeout variable
var t=0;
// global variable to represent current time picker
var timepickerInst='';

function onSelectCallback(){
t=setTimeout("dateUpdateCallback()",50);
}
function onCloseCallback(){

} 
function dateUpdateCallback(){
$=jQuery;
if( $('#'+timepickerID).length != 0 ){
    t=setTimeout("dateUpdateCallback()",50);
}
else {
    setupTimepicker($);
    //jQuery(document).find('#'+timepickerID).focus();
}
}

function setupTimepicker($){
    timepickerID = $('.form-item-field-days-start-time-und-0-value .text-full.form-text').attr('id');
    $('.form-item-field-days-start-time-und-0-value .text-full.form-text').timepicker({
    // Options
    timeSeparator: ':',           // The character to use to separate hours and minutes. (default: ':')
    showLeadingZero: false,        // Define whether or not to show a leading zero for hours < 10.
    showMinutesLeadingZero: true, // Define whether or not to show a leading zero for minutes < 10.
    showPeriod: true,            // Define whether or not to show AM/PM with selected time. (default: false)
    showPeriodLabels: true,       // Define if the AM/PM labels on the left are displayed. (default: true)
    periodSeparator: ' ',         // The character to use to separate the time from the time period.
    defaultTime: '08:00',         // Used as default time when input field is empty or for inline timePicker

    // Localization
    hourText: 'Hour',             // Define the locale text for "Hours"
    minuteText: 'Min',         // Define the locale text for "Minute"
    amPmText: ['AM', 'PM'],       // Define the locale text for periods

    // Position
    myPosition: 'left top',       // Corner of the dialog to position, used with the jQuery UI Position utility if present.
    atPosition: 'left bottom',    // Corner of the input to position

    onSelect: onSelectCallback,
    onClose: onCloseCallback,

    // custom hours and minutes
    hours: {
        starts: 02,                // First displayed hour
        ends: 21                  // Last displayed hour
    },
    minutes: {
        starts: 0,                // First displayed minute
        ends: 45,                 // Last displayed minute
        interval: 15               // Interval of displayed minutes
    },
    rows: 4,                      // Number of rows for the input tables, minimum 2, makes more sense if you use multiple of 2
    showHours: true,              // Define if the hours section is displayed or not. Set to false to get a minute only dialog
    showMinutes: true,            // Define if the minutes section is displayed or not. Set to false to get an hour only dialog

    // buttons
    showCloseButton: true,       // shows an OK button to confirm the edit
    closeButtonText: 'Done',      // Text for the confirmation button (ok button)
    showNowButton: false,         // Shows the 'now' button
    nowButtonText: 'Now',         // Text for the now button
    showDeselectButton: false,    // Shows the deselect time button
    deselectButtonText: 'Deselect' // Text for the deselect button

});
}

jQuery(document).ready( function($) {   
setupTimepicker($);
});

//全局超时变量
var t=0；
//表示当前时间选择器的全局变量
var timepickerist=''；
函数onSelectCallback（）{
t=setTimeout（“dateUpdateCallback（）”，50）；
}
函数onCloseCallback（）{
} 
函数dateUpdateCallback（）{
$=jQuery；
if（$（'#'+timepickerID）.length！=0）{
t=setTimeout（“dateUpdateCallback（）”，50）；
}
否则{
setupTimepicker（$）；
//jQuery（document）.find（'#'+timepickerID.focus（）；
}
}
函数设置时间选择器（$）{
timepickerID=$（'.form-item-field-days-start-time-und-0-value.text-full.form-text'）.attr（'id'）；
$（'.form-item-field-days-start-time-und-0-value.text-full.form-text'）。时间选择器({
//选择权
timeSeparator:“：”，//用于分隔小时和分钟的字符。（默认值：“：”）
showLeadingZero:false，//定义在小于10小时内是否显示前导零。
showMinutesLeadingZero:true，//定义在小于10分钟内是否显示前导零。
showPeriod:true，//定义是否显示所选时间的AM/PM。（默认值：false）
showPeriodLabels:true，//定义是否显示左侧的AM/PM标签。（默认值：true）
periodSeparator:“”，//用于将时间与时间段分隔开的字符。
defaultTime:'08:00'，//当输入字段为空时用作默认时间或用于内联时间选择器
//本地化
hourText:'Hour'，//定义“Hours”的区域设置文本
minuteText:'分钟'，//定义“分钟”的区域设置文本
amPmText:['AM'，'PM']，//定义句点的区域设置文本
//位置
myPosition:'左上'，//要定位的对话框的一角，与jQuery UI位置实用程序（如果存在）一起使用。
atPosition:'左下'，//输入到位置的角
onSelect:onSelectCallback，
onClose:onCloseCallback，
//自定义小时和分钟
工作时间：{
开始：02，//显示的第一个小时
结束：21//最后显示的小时数
},
会议记录：{
开始：0，//显示的第一分钟
结束：45，//最后显示的分钟
间隔：15//显示的分钟间隔
},
rows:4，//如果使用2的倍数，则输入表的行数至少为2更有意义
showHours:true，//定义是否显示小时部分。设置为false以获取仅分钟的对话框
showMinutes:true，//定义是否显示分钟部分。设置为false可获取仅小时对话框
//钮扣
showCloseButton:true，//显示确定按钮以确认编辑
closeButtonText:'完成'，//确认按钮（确定按钮）的文本
showNowButton:false，//显示“现在”按钮
nowButtonText:'现在'，//现在按钮的文本
ShowDeselect按钮：false，//显示取消选择时间按钮
取消选择按钮文本：“取消选择”//取消选择按钮的文本
});
}
jQuery（文档）.ready（函数（$）{
setupTimepicker（$）；
});