Question

我正在尝试创建一个链接，当点击该链接变成文本框时。默认情况下，文本框是“聚焦”的，当您单击文本框外的任何位置时（因此使其“未聚焦”），它将返回到原始链接。我试图在JQuery中使用replaceWith（）函数来执行此操作但是无法正确使用。链接变成文本框但是由于某种原因，我没有正确理解它不会在文本框“未聚焦”时转回链接。这是我创造的小提琴是为了说明这一点。有谁能告诉我这里我做错了什么。

我使用的代码是，

<script>
    $(document).ready(function() {
      $('a.edit').click(function() {
        var removed = $(this).replaceWith("<input type='text' class='searchBox'/>");
        $('input.searchBox').focus();
      });

      $('input.searchBox').focusout(function() {
        $(this).replaceWith('<a class="edit" href="#">Edit</a>');
      });
    });
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

<div class="controls">
  <a class="edit" href="#">Replace Link</a>
</div>

非常感谢。：）

Answer 1

将事件附加到父.controls元素，使用事件委派

＆＃13;

$(document).ready(function() {
  $(".controls").on("click", 'a.edit', function() {
    var removed = $(this).replaceWith("<input type='text' class='searchBox'/>");
    $('input.searchBox').focus();
  });

  $(".controls").on("focusout", 'input.searchBox', function() {
    $(this).replaceWith('<a class="edit" href="#">Edit</a>');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<div class="controls">
  <a class="edit" href="#">Replace Link</a>
</div>

＆＃13;

在JQuery中replaceWith（）

1 个答案: