jQueryにて条件に当てはまっていないif内にあるblurが発火してしまう

Question

前提・実現したいこと

railsにてjQueryを利用しています。
フォームが空白でフォーカスされてない時にform-activeクラスを付与しbackgroundを赤に変え
空白でフォーカスされている時と空白ではない時はform-activeクラスを削除するようにしたいです。

発生している問題・エラーメッセージ

更新後は上記の通り動いたのですが
一回バックスペースで全て削除した後再度入力しform-design以外をクリックするとform-activeが付与されてしまいます。
私の考えでは入力されているのでif文で弾かれremove及び「空白ではない」とconsoleに出る見込みなのですが

layout.js:5 （記入されている文字）←form-designをクリック後
layout.js:17 空白ではない
layout.js:12 空白かつフォーカスされてない←form-design以外をクリック後
layout.js:12 空白かつフォーカスされてない
layout.js:12 空白かつフォーカスされてない
layout.js:12 空白かつフォーカスされてない
layout.js:12 空白かつフォーカスされてない
layout.js:12 空白かつフォーカスされてない
layout.js:12 空白かつフォーカスされてない

となり、layout.js:5,:17で記入されているのを認識されているにも関わらず
その後form-design以外をクリック後も5,17を期待しているのですが12が読み込まれます。

該当のソースコード

= form_with(url: xxx_path,method: :get, local: true)do |f|
   = f.text_field :keyword, {class: "form-design form-active",required: true}

.form-active{
  background: red;
}

$(function(){
  $(document).on('keyup click', '.form-design', function(e){
    e.preventDefault();
    var input = $(".form-design").val();
    console.log(input);
    if(input == "") {
      $(".form-design").on("focus",function(){
        $(this).removeClass("form-active");
        console.log("空白かつフォーカス中");
      }).on("blur",function(){
        $(this).addClass("form-active");
        console.log("空白かつフォーカスされてない");
      }); 
    }
    else{
      $(this).removeClass("form-active");
      console.log("空白ではない");
    }
  });
});

Answer 1

イベントがonにされたままでoffになってないからでは。
ただ、イベントの付与のタイミングが現在の位置では微妙です。
クラスの付け外しを行うのでしたら、そのクラスがついてる要素に対するイベント付与で良い気がします。（つまりイベントの中でイベントということをしなくて良い）

動的になるのなら、documentからイベント監視したほうが良さそうです。
$(document).on(イベント,セレクタ,function(){})

Comments

[sakusakusaku10]

ご回答ありがとうございます！！
>>クラスの付け外しを行うのでしたら、そのクラスがついてる要素に対するイベント付与で良い気がします。（つまりイベントの中でイベントということをしなくて良い）

私の知識不足ゆえにここの部分が難解だったのですが、具体的におききしてもよろしいでしょうか。

[m.ts10806]

コード見た感じ.form-activeを付け外しされてるようなので.form-activeをイベントトリガにするとかでしょうか。

$(document).on("focus",".form-design",function(){

ただぞもそもkeyup clickが付与されてる上にイベントが付与されるので、
元々のコードでも混線してそうにも思いますが。

[sakusakusaku10]

$(function(){
$(document).off('keyup click','.form-design').on('keyup click', '.form-design', function(){
var input = $(".form-design").val();
console.log(input);
$(document).off("blur",'.form-design').on("blur",".form-design",function(){
if (input == "") {
$(this).addClass("form-active");
console.log("空白かつフォーカスされてない1");
// $('.form-design').off('keyup click blur')
}else{
$(this).removeClass("form-active");
console.log("空白ではない1");
// $('.form-design').off('keyup click blur')
}
});
$(document).off("focus",'.form-design').on("focus",".form-design",function(){
if (input == "") {
$(this).removeClass("form-active");
console.log("空白かつフォーカスされている");
// $('.form-design').off('keyup click focus')
}else{
$(this).removeClass("form-active");
console.log("空白ではない2");
// $('.form-design').off('keyup click focus')
}
})
});
});

あってるか分かりませんがコメントを見て自分なりに考えてみました！
すると思った通りの動きをしてくれました。
ご回答ありがとうございます！