將文本更改為輸入，然后在取消選擇時再次返回

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() { $(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/