Нажмите кнопку перед тем, как скрыть JS

Question

У меня есть textarea, что, когда он сфокусирован, я хочу показать кнопку рядом с этим текстом.

Мой процесс был:

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

Поместите текстовое поле и кнопку в одном DIV:

клик Тест

Использование JS Скрыть и сделать кнопку видимой:

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

Проблема:

Когда я нажимаю кнопку, событие клика не происходит, так как кнопка сначала скрыта. Что я могу сделать, чтобы решить эту проблему?

JSFiddle here.

Edit:

Я использовал это, чтобы решить эту проблему, как указано некоторыми пользователями:

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

Answer 1

Вы можете использовать MouseEnter() и MouseLeave() вместо focusin/выход?

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

Answer 2

Я бы даже не использовать focusout, это усложнять слишком много, и вы на самом деле дон Кажется, это нужно. Было бы лучше, если бы .button справились с обратным состоянием. Это также уменьшит ваши строки кода.

Попробуйте это:

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

Вот рабочий fiddle