jquery - addClassが使用されているときにJqueryクラスセレクターがトリガーされない

Question

次のコードは、とりわけ「shift」と呼ばれる DIV にクラスを追加します。

$('.adminopen').click(function(){
        $('.backoffice').addClass('open');
        $('.maincontent').addClass('shift')
        return false
    });

このクラスが追加されると、最初のドキュメント準備完了セクションに含まれる次のスクリプトもトリガーされないのはなぜですか。

$('.shift').click(function(){
        $('.backoffice').removeClass('open');
        $('.maincontent').removeClass('shift');
    });

Answer 1

最初の要素にのみバインドしているためです。on で委任を使用します。

$(document.body).on('click', '.shift', function(){

Answer 2

これは、イベントを shift にバインドしているときに shift が DOM に存在しないためです。

イベント委任を使用する必要があります-

$(document).on('click','.shift',function(){
        $('.backoffice').removeClass('open');
        $('.maincontent').removeClass('shift');
});

Answer 3

上記のようにイベント委任を使用するか、クラスを割り当てるときにイベント ハンドルをバインドします。

function bindShift() {
    $('.shift').click(function () {
        $('.backoffice').removeClass('open');
        $('.maincontent').removeClass('shift');
    });
}

$('.adminopen').click(function () {
    $('.backoffice').addClass('open');
    $('.maincontent').addClass('shift');
    bindShift();
    return false
});