jquery。 jeditable.Cancel前一次選擇器時，打開一個新的時間選擇器

Question

使用jeditable jQuery插件和timepicker插件。 （自定義輸入「時間選擇器2」從這個頁面：http://www.appelsiini.net/projects/jeditable/custom.html）

時間選擇器插件接縫，以覆蓋'onblur取消'功能，並單擊一個新的可編輯區域將添加另一個選擇器到頁面而不清除第一個。

有在JSfiddle工作示例：

HTML：

<table width="100%" cellspacing="0" cellpadding="0" class="individual_times"> 
    <tbody> 
     <tr> 
      <th>Start</th> 
      <th>End</th> 
      <th>Elapsed</th> 
      <th></th> 
     </tr> 
     <tr> 
      <td style="width: 290px" id="start_124" class="time" title="Click to edit...">11:38</td> 
      <td style="width: 290px" id="end_124" class="time" title="Click to edit...">11:29</td> 
      <td>838:59:59</td> 
      <td><span id="delete124"><img alt="delete" src="http://www.earner.iixxii.cc/modules/apTimetracker/images/delete.png" style="vertical-align: top;"></span> 
      </td> 
     </tr> 
     <tr> 
      <td style="width: 290px" id="start_125" class="time" title="Click to edit...">12:03</td> 
      <td style="width: 290px" id="end_125" class="time" title="Click to edit...">12:03</td> 
      <td>00:00:01</td> 
      <td><span id="delete125"><img alt="delete" src="http://www.earner.iixxii.cc/modules/apTimetracker/images/delete.png" style="vertical-align: top;"></span> 
      </td> 
     </tr> 
     <tr> 
      <td style="width: 290px" id="start_126" class="time" title="Click to edit...">12:24</td> 
      <td style="width: 290px" id="end_126" class="time" title="Click to edit...">12:34</td> 
      <td>00:09:15</td> 
      <td><span id="delete126"><img alt="delete" src="http://www.earner.iixxii.cc/modules/apTimetracker/images/delete.png" style="vertical-align: top;"></span> 
      </td> 
     </tr> 
     <tr> 
      <td style="width: 290px" id="start_127" class="time" title="Click to edit...">12:35</td> 
      <td colspan="2">Currently working....</td> 
      <td><span id="delete127"><img alt="delete" src="http://www.earner.iixxii.cc/modules/apTimetracker/images/delete.png" style="vertical-align: top;"></span> 
      </td> 
     </tr> 
    </tbody> 
</table> 

JS：

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); 
} 

在開始或結束欄點擊任何時代將改變時間編輯。

我希望它的工作方式是在舊時間點擊新時間時返回到未編輯狀態。在jquery.editable.js函數中有一個取消操作。

我想知道的是如何直接調用，當一個新的時間點擊。

Answer 1

您可以附加一個單擊處理每個元素，可以將所有其他editables：

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

見更新jsfiddler：http://jsfiddle.net/william/kb2n5/1/