jQuery .on（）がクリックで即座に起動しません。

Question

ボタンをクリックすると、IDを変更して、クラスtoMenuを追加して新しいスタイルを適用します。私がしたかったのは、新しいID menuのボタンをクリックすると、別のクラスmenuTransitionが追加されたということです。しかし、今のところ、古いID #buttonのボタンをクリックするとクラスmenuTransitionが既に追加されています。しかし、新しいID #menuのボタンがクリックされるまで、クラスmenuTransitionを追加しないでください。ここ
は私のコードです：

$(document).ready(function() { 
    $("#button").click(function(){ 
       $("#button").addClass("toMenu") 
       $("#button").attr("id","menu"); 
    }); 
}); 
$(document).on("click", "#menu", function() { 
     $("#menu").addClass("menuTransition"); 
}); 

Answer 1

あなたが見ているどのような競合状態のビットです。ボタンのクリックイベントハンドラでは、ボタンにクラスとIDを追加します。次に、デリゲートされたイベントハンドラを使用して、子孫要素からバブルアップしたものであっても、ドキュメント上のクリックを探し、そこにクラスを追加します。これを処理する1つの方法は、通常はあなたのサンプルコードで発生するこのレースを短絡するために、小さな（約1ミリ秒）遅延を加えることです。 1ミリ秒の遅延を追加することにより

$(document).ready(function() { 
 
    $("#button").click(function() { 
 
    $("#button").addClass("toMenu") 
 
    setTimeout(function() { 
 
     $("#button").attr("id", "menu"); 
 
    }, 1) 
 
    }); 
 
}); 
 
$(document).on("click", "#menu", function() { 
 
    $("#menu").addClass("menuTransition"); 
 
});

.toMenu { 
 
    font-weight: bold; 
 
} 
 
.menuTransition { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="button"> 
 
    button 
 
</button>

は、IDは、文書イベントハンドラに達しているボタンをクリックした後に添加するだけで火災ボタンを最初にクリックした後、そのイベントハンドラので、 。

Answer 2

IDを変更しないでください。要素IDは静的であることを意図しています。あなたは、ボタン/メニューの現在の状態をタグ付けするためにクラスを使用し、それに応じて動作させる（そして同時に$(document)上の非効率的な委任イベントハンドラを回避することができます（これはおそらく非常に簡単になり

$(document).ready(function() { 
    $("#menubutton").on('click', function() { 
     var $this = $(this); 
     if ($this.hasClass('toMenu')) { 
      $this.addClass('menuTransition'); 
     } else { 
      $this.addClass('toMenu'); 
     } 
    }); 
});