クリックイベントが関数内で複数回呼び出されています

Question

クリックイベントを発生させるためのコードを作成しました。これらのイベントは、関数を使用してネストされたようなものです。ボタンをクリックすると、clickイベントが複数回呼び出されます。

例：サイドバーを開くボタン（b1）が1つあります（すでに隠されています）。サイドバーにある別のボタン（b2）があります。私がサイドバーを開いてb2を初めてクリックすると、それはうまくいきます。これは1回だけ呼び出すことです。しかし、サイドバーを閉じてb1を使用してサイドバーを再度開いてb2をクリックすると、2回トリガされたイベントをクリックします。同様に、b1を使用してサイドバーを開いた状態で複数回トリガします。私は私の関数はB1のすべてのクリックで複数回呼んでいる知っているとB2のイベントが複数の時間を初期化してクリック

<button class="b1">Show Sidebar</button> 
<button class="b3">Hide Sidebar</button> 
<div class="sidebar"> 
    <input type="text" class="demo"> 
    <button class="b2">Triggers</button> 
</div> 
<script> 
    function getSidebarEvents() { 
     $('.b2').click(function(){ 
      console.log('Triggering Multiple times');  
     }); 
    } 
    $('.b1').click(function() { 
     //Do something to open sidebar 
     getSidebarEvents(); 
    }); 
    $('.b3').click(function() { 
     //Do something to close sidebar 
    }); 
</script> 

：トリガーは以下 B1
のクリックに増加しているたびに私のコードです。しかし、大きな変更を加えてこの構造を変更することはできません。私はこれを解決するのに役立つ小さな変化が必要です。

Answer 1

clickイベントハンドラを関数の外に割り当てる必要があります。今度はの場合、その関数の中からクリックをシミュレートするには、clickイベントを呼び出します。

function getSidebarEvents() { 
    $('.b2').click(); 
} 
$('.b1').click(function() { 
    //Do something to open sidebar 
    getSidebarEvents(); 
}); 
$('.b2').click(function(){ 
    console.log('Triggering Multiple times');  
}); 
$('.b3').click(function() { 
    //Do something to close sidebar 
});