jquery - jQuery-要素に新しく追加されたクラスでnot（）が機能しない

Question

数字のdivをクリックすると、アラートが表示されます。クリッカーをクリックすると、lessのクラスがnumbers divに追加されます。その後、numbers divをクリックしても、クラスがlessになっているため、アラートは表示されません。代わりに、クラスが少ないかのように、アラートが表示されます。私は何が間違っているのですか？

<div id="clicker">Clicker</div>
<div class="numbers">123456789</div>

$('.numbers').not('.less').on('click',function(){
    alert('should not alert if has class less after clicker');
});

$('#clicker').on('click',function(){
    $('.numbers').addClass('less');
});

これがフィドルです

ヘルプフェラーのおかげで、私はこれで終わりました：

$('body').on('click', '.numbers:not(".less")', function(){
   alert('should not alert if has class less after clicker');
});

Answer 1

バインドしてから、クラスを追加します。後でバインドするか、イベントを一貫した親に委任する必要があります。

Answer 2

イベントを委任してみてください

$('body').on('click','.numbers' ,function(e){
    if( $(e.target).hasClass('less'){
       // Do nothing
    }
    else{
       alert('should not alert if has class less after clicker');
    }
});

フィドルをチェック

イベントはクラスではなく要素に追加されるため、クラス条件に基づいてイベントを発生させない条件を追加すると、機能しなくなります。

このような場合は、イベントを委任する必要があります。

Answer 3

$（ "numbers"）は一度テストに合格し、クリックイベントにバインドされました。完了しました-バインディングは修正されています。