jQueryのは、ユーザーがクリックしたとき、私は要素にクラスを追加したaddClass

Question

後にクリックハンドラを追加します。再びスクロールします。

$(document).on('click', '.scrolls', function() { 
    //scrolls nicely to that service description 
}); 

問題： はできるだけ早く私は、「.service-宣伝文句」要素の最初の時間をクリックすると、そのクラスを追加するだけではなく、スクロールします。ユーザーが2回目にクリックしたときにのみスクロールします。

Answer 1

は、イベントが文書に出てバブリングされ、その後、それはあなたが.scrollに一致する要素をクリックしたかどうかをチェックするので、それが委任ハンドラを実行することです。

イベントバブリングを停止するように最初のハンドラを変更します。

$('.service-blurb').click(function(e) { 
    $(this).addClass('scrolls'); 
    e.stopPropagation(); 
}); 

Answer 2

最初のクリックまでハンドラを追加したくないようですね。何が起こっている

$('.service-blurb').click(function() { 
    $(this).addClass('scrolls'); 
    $(this).off('click'); // Disable this handler now that we're done 

    $(document).on('click', '.scrolls', function() { 
     //scrolls nicely to that service description 
    }); 
}); 

Answer 3

私が正しく理解していれば、event.preventDefault（）が必要です。より多くの場合

$('.service-blurb').click(function(e) { 
    $(this).addClass('scrolls'); 
    e.preventDefault; 
}); 

...それはまだ自動的に2番目のクリックをトリガーしています...ここhttps://api.jquery.com/event.preventdefault/