title: Click Button Before being Hidden by JS
body: <p>I've a <strong>textarea</strong> that when It's focused I want to show a button near that text.</p>
  
  <p>My process was:</p>
  
  <pre><code>&lt;div class="div_textarea col-lg-6"&gt;
    &lt;button class="button pull-right invisible" type="button"&gt;click&lt;/button&gt;
    &lt;textarea rows="4" cols="50"&gt;Test&lt;/textarea&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Put the textarea and button in same DIV:</p>
  
  
    click
    Test
  
  
  <p>Use JS to Hide and make the button visible:</p>
  
  <pre><code>$(document).ready(function() {
    $(".div_textarea").focusin(function() {
      $(this).find('button').css('visibility', 'visible');
    });
    $(".div_textarea").focusout(function() {
      $(this).find('button').css('visibility', 'hidden');
    });
  });
  </code></pre>
  
  <p>The problem:</p>
  
  <p>When I click the button, the click event is not happening since the button is hidden first. What can I do to solve this?</p>
  
  <p>JSFiddle <a href="https://jsfiddle.net/15dc4kch/1/" rel="nofollow">here</a>.</p>
  
  <p>Edit:</p>
  
  <p>I've used this to solve the issue as stated by some users:</p>
  
  <pre><code>$(".div_textarea").focusin(function() {
    $(this).find('button').css('visibility', 'visible');
  });
  $(".div_textarea").focusout(function() {
    $(".div_textarea").mouseleave(function() {
      $(this).find('button').css('visibility', 'hidden');
    })
  });
  </code></pre>