將文本更改爲輸入，然後再取消選擇

Question

我有一個按鈕，當我點擊它時，我將它的兄弟變換爲包含它曾經保存的文本的輸入。

這工作正常。

但是，取消選擇輸入後，我需要再次回到文本，但問題是，const變量正在被覆蓋？

不管怎麼說，這是我目前的HTML和JS：

$(function() { 
 
    $(document).on("click", "table.table-striped > tbody > tr > td > a.copy-btn", function(e) { 
 
    e.preventDefault(); 
 

 
    const $this = $(this), 
 
     text = $this.parent().parent().find("td.link").text(); 
 

 
    $this.parent().parent().find("td.link").html(`<input type="text" class="form-control" value="${text}">`); 
 

 
    $this.parent().parent().find("td.link input").select(); 
 

 
    if ($this.parent().parent().find("td.link input").blur()) { 
 
     $this.parent().parent().find("td.link").html(text); 
 
    } 
 
    }); 
 

 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-striped"> 
 
    <thead> 
 
    <tr> 
 
     <th class="title">link name</th> 
 
     <th class="title">Platform</th> 
 
     <th class="title">Link</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <th class="body-text" scope="row">1</th> 
 
     <td class="body-text">Mark</td> 
 
     <td class="body-text link">Otto</td> 
 
     <td class="body-text"><a href="#" class="copy-btn">Copy</a> 
 
     </td> 
 
     <td class="body-text"><a href="#" class="more-btn">More</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <th class="body-text" scope="row">1</th> 
 
     <td class="body-text">Otto</td> 
 
     <td class="body-text link">Mark</td> 
 
     <td class="body-text"><a href="#" class="copy-btn">Copy</a> 
 
     </td> 
 
     <td class="body-text"><a href="#" class="more-btn">More</a> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

線$this.parent().parent().find("td.link input").blur()將始終返回true。
它觸發了blur事件，並返回jQuery集合。

如果你想檢查元素集中，最簡單的將只是

$this.parent().parent().find("td.link input").get(0) === document.activeElement 

然而，這不是真的，你想要什麼，你想一個事件處理程序，而不是，你可以在添加這樣元素的創建（與清理碼和高速緩存的元素等）

$(function() { 
 
    $(document).on("click", "table.table-striped > tbody > tr > td > a.copy-btn", function(e) { 
 
     e.preventDefault(); 
 

 
     var $this = $(this), 
 
      parent = $this.parent().parent(), 
 
      link = parent.find("td.link"), 
 
      text = link.text(), 
 
      input = $('<input />', { 
 
       'class' : 'form-control', 
 
       value : text, 
 
       type : 'text', 
 
       on  : { 
 
        blur : function() { 
 
        \t $(this).parent().html(text); 
 
        } 
 
       } 
 
      }); 
 

 
     link.html(input); 
 
     input.select().focus(); 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-striped"> 
 
    <thead> 
 
     <tr> 
 
      <th class="title">link name</th> 
 
      <th class="title">Platform</th> 
 
      <th class="title">Link</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <th class="body-text" scope="row">1</th> 
 
      <td class="body-text">Mark</td> 
 
      <td class="body-text link">Otto</td> 
 
      <td class="body-text"><a href="#" class="copy-btn">Copy</a> 
 
      </td> 
 
      <td class="body-text"><a href="#" class="more-btn">More</a> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <th class="body-text" scope="row">1</th> 
 
      <td class="body-text">Otto</td> 
 
      <td class="body-text link">Mark</td> 
 
      <td class="body-text"><a href="#" class="copy-btn">Copy</a> 
 
      </td> 
 
      <td class="body-text"><a href="#" class="more-btn">More</a> 
 
      </td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Answer 2

變化

if ($this.parent().parent().find("td.link input").blur()) { 
     $this.parent().parent().find("td.link").html(text); 
} 

到

var $input = $this.parent().parent().find("td.link input"); 
$input.off("blur") 
$input.on("blur", function() { 
    $this.parent().parent().find("td.link").html(text); 
}); 

Answer 3

是這樣的，你腦子裏想的是什麼？

$(function() { 
    $(document).on("click", "table.table-striped > tbody > tr > td > a.copy-btn", function(e) { 
     e.preventDefault(); 

     const $this = $(this), 
       text = $this.parent().parent().find("td.link").text(); 

     $this.parent().parent().find("td.link").html('<input type="text" class="form-control" value="' + $.trim(text) + '">'); 

     $this.parent().parent().find("td.link input").select(); 
      $($this).closest('tr').find('.form-control').on('blur', function() { 
      var xThis = this; 
      var finText = $(xThis).val(); 
      $(xThis).closest('td').html(finText); 
      $(xThis).off('blur'); 
     }); 

     return false; 
    }); 
})(); 

見我的jsfiddle例如：https://jsfiddle.net/fictus/mmwc06gm/