Jquery 在被JS隐藏之前单击按钮

我有一个文本区域，当它聚焦时，我想在文本附近显示一个按钮

我的过程是：

<div class="div_textarea col-lg-6">
  <button class="button pull-right invisible" type="button">click</button>
  <textarea rows="4" cols="50">Test</textarea>
</div>

问题是：

当我单击按钮时，单击事件不会发生，因为按钮首先被隐藏。我能做些什么来解决这个问题

JSFiddle

编辑：

我已经用它解决了一些用户所说的问题：

$(".div_textarea").focusin(function() {
  $(this).find('button').css('visibility', 'visible');
});
$(".div_textarea").focusout(function() {
  $(".div_textarea").mouseleave(function() {
    $(this).find('button').css('visibility', 'hidden');
  })
});

---

我甚至不会使用

focusout

，它让事情变得太复杂了，而且你似乎真的不需要它。最好让

按钮

处理反向状态。这也会减少代码行数

试试这个：

$(document).ready(function() {
  $(".div_textarea").focusin(function() {
    $(this).find('button').css('visibility', 'visible');
  });

  $('.div_textarea button').on('click', function() {
    console.log('works')
    $(this).css('visibility', 'hidden');
  });
});

这里有一个可行的方法，你能用mouseenter（）和mouseleave（）代替focusin/out吗

$( document ).ready(function() {
    $(".div_textarea").mouseenter(function() {
        $(this).find('button').css('visibility','visible');
    });

    $(".div_textarea").mouseleave(function() {
        $(this).find('button').css('visibility','hidden');
    });

  $("button").click(function(){
    alert("foo");
  });
});

---

它没有按我预期的方式工作。隐藏延迟必须至少为100ms，否则按钮事件不会触发。很奇怪。见下文。我担心这里面不应该有一个神奇的数字。谢谢你，伙计。问题是我在整个代码中复制了这个所谓的“div”，我使用了您的部分解决方案。谢谢你，伙计。刚刚添加到主题中。

$( document ).ready(function() {
    $(".div_textarea").mouseenter(function() {
        $(this).find('button').css('visibility','visible');
    });

    $(".div_textarea").mouseleave(function() {
        $(this).find('button').css('visibility','hidden');
    });

  $("button").click(function(){
    alert("foo");
  });
});