jqueryでクラス名を追加した後、機能していない関数をクリックしてください。動的コードは不要です

Question

動的コードは不要です。最初はアニメーションを右から左へ移動させた後、同じ位置に戻したいので、その部分を戻すためにCSSを置き換えます。

私は既存のクラスを追加し、新しいクラスを追加します。ここでクラスのクリック機能を追加した後は動作しません。

$(document).ready(function() { 
    $(".leftIcon").click(function() { 
     $(".leftPan").animate({left: '-250px'}); 
     $(".leftIcon i").css({'transform': 'rotate(-180deg)'}); 
     $(this).addClass("leftIcon-enLarged"); 
     $(this).removeClass("leftIcon"); 
    }); 

    $(".leftIcon-enLarged").click(function() { 
     $(".leftPan").animate({left: '0px'}); 
     $(".leftIcon-enLarged i").css({'transform': 'rotate(-180deg)'}); 
     $(this).addClass("leftIcon"); 
     $(this).removeClass("leftIcon-enLarged"); 
    }); 

}); 

私は静的なコードを持っていません。

$(document).on('click', '.leftIcon', function(){ 
    // your code here 
}); 

Answer 1

、次のような$(document).on()を使用する必要がありますか？

Answer 2

なぜないだけではなく、$(document).on('click', '.leftIcon-enLarged', function() {を使用する：あなたは動的に新しいクラスを追加する場合

Answer 3

動的コンテンツには$(document).on('click')イベントを使用できます。

$(document).ready(function() { 
    $(document).on('click', '.leftIcon', function(){ 
     $(".leftPan").animate({left: '-250px'}); 
     $(".leftIcon i").css({'transform': 'rotate(-180deg)'}); 
     $(this).addClass("leftIcon-enLarged"); 
     $(this).removeClass("leftIcon"); 
    }); 

    $(document).on('click', '.leftIcon-enLarged', function(){ 
     $(".leftPan").animate({left: '0px'}); 
     $(".leftIcon-enLarged i").css({'transform': 'rotate(-180deg)'}); 
     $(this).addClass("leftIcon"); 
     $(this).removeClass("leftIcon-enLarged"); 
    }); 

});