将文本更改为输入，然后在取消选择时再次返回

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

但是，这不是你想要的，你想要一个事件处理程序，你可以在创建元素时添加它，如（带有清理代码和缓存元素等）< / em>的

＆＃13;

＆＃13;

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

    });
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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/