jQueryでのイベントの発火順序を変えたい

Question

テキストエリアをフォーカスした際に、ボタンをenabledにし、
フォーカスを外すとボタンをdisabledにしています。

フォーカスして、そのままボタンをクリックすると、
ボタンがdisabledになってしまい、ボタンのイベントが発火できませんでした。

どうすれば発火できるでしょうか？
サンプルコードは下記となります。

<textarea id="textarea"></textarea>
<button id="button"></button>

$('#textarea').focusin(function(){
  $('#button').prop('disabled', false);
});

$('#textarea').focusout(function(){
  $('#button').prop('disabled', true);
});

$('#button').click(function() {
  console.log('click');
});

Comments

[think49]

> フォーカスして、そのままボタンをクリックすると、ボタンがdisabledになってしまい、ボタンのイベントが発火できませんでした。

ボタンにフォーカスを移した時点で、テキストエリアのフォーカスが外れます。
手段と目的が一致していないのは明らかなので、目的を見据えて手段を変更して下さい。

Answer 1

textareaにフォーカスしながらボタンを押すなんてことはできないので、disableにする処理を消す必要があります。

$('#textarea').focusin(function(){
  $('#button').prop('disabled', false);
});

// $('#textarea').focusout(function(){
//   $('#button').prop('disabled', true);
// });

$('#button').click(function() {
  console.log('click');
});

Answer 2

無理やりでいいならdelayする

$('#textarea').focusout(function(){
  $('#button').delay(100).queue(function(){
    $(this).prop('disabled', true).dequeue();
  });
});