如何在jquery中每次處理雙擊事件

Question

我創建表時動態地包含了一些數據。當用戶雙擊每個<td>時，<td>轉換爲<input type='text'>。如果用戶在該輸入之外單擊，則必須將其保存到數據庫。 但問題是，如果用戶雙擊<td>，函數第一次觸發，如果再次雙擊，它會觸發點擊事件。

<table> 
    <tbody> 
    <tr><td data-name="name">US</td></tr> 
    </tbody> 
</table> 

<script> 
    $(document).on('dblclick','tbody tr td', function(){ 
    var value = $(this).text(); 
    var name = $(this).attr('data-name'); 
    $(this).html('<input type="text" id="tmp_ed" value="'+value+'"/>'); 
    $(document).on('click', function(e){ 
     if(e.target.id !='tmp_ed'){ 
      var item = $('#tmp_ed').val(); 
      $.ajax({ 
      url: "update.php", 
      data: item, 
      success: function(d){ 
       alert(d); 
      } 
      }); 
     } 
    }); 
    }); 
</script> 

Answer 1

是的，這應該是行爲。由於您已連接雙擊此處 -

$(document).on('dblclick','tbody tr td', function(){ 

只限於tbody tr td。一旦你點擊它，它就會像你說的那樣轉換成<input type='text'>。現在，這個元素沒有雙擊它。因此，您無法再次雙擊。

如果需要再有雙擊，修改JS來 -

 .... 
     var name = $(this).attr('data-name'); 
     $(this).html('<input type="text" id="tmp_ed" value="'+value+'"/>'); 
     $(this).on('dblclick', function(){ 
      $(this).html(value);  
     })  
     $(document).on('click', function(e){ 
      if(e.target.id !='tmp_ed'){ 
     .... 

參考小提琴 - https://jsfiddle.net/jmeengzu/