jQuery $(elm).click()の挙動がおかしい

こんにちは。いつもありがとうございます。
jQueryの挙動でわからないことがあるので質問させていただきました。
###前提・実現したいこと
１つのHTMLをjsで複数のページに見せるように作っているのですが、routerなどを使っていないため、戻るボタンをページ内に作りました。
大まかな構造としては、

Home > Gallery > Content

の三層に分かれています。
GalleryとContentページに戻るボタンを配置しており、それらの要素は同じ#backのついたdivです。
###発生している問題・エラーメッセージ
その#backを押されたら現在表示されているページによってifで別の動作をするようにしているのですが、
１回目、HomeからGalleryへ、GalleryからContentへと移動して戻るボタンを押すと正常に動作します。
２回目、Homeに戻った状態からもう一度Gallery => Contentへと移動し戻るボタンを押すと、
Galleryに戻るための関数は実行されるのですが、なぜがそのすぐ後にHomeに戻る関数も実行されHomeに戻ってしまいます。

###該当のソースコード

HTML
1/*HTMLの構造*/
2<div id="home">
3
4</div>
5
6<div id="gallery">
7     <header><div id="back"></div></header>
8     <div id="content">
9     </div>
10</div>

戻るボタンを押された時に実行される関数です。

javascript
1function headerBackButton() {
2	$("#back").click(function(){
3			if(currentState == "indivisual"){
4				backToGallery();
5				console.log("backToGallery");
6				return false;
7			}else if(currentState == "gallery"){
8				backToHome();
9				console.log("backToHome");
10				return false;
11			}
12	});
13}

###試したこと
何らかの理由で$("#back").click()が２回実行されてifの両方に該当してしまったのだと思い、setTimeoutでtrue,falseで少し待たせてからやってみても、なぜか同じタイミングif内とelse if内のコードが実行されていて意味がありませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)
jQuery: jquery-3.1.0.js

なぜこうなるのかご存知の方おられましたらご教授ください。宜しくお願いします。

s8_chu

2017/02/12 19:37

currentState, backToHome関数について追記していただけませんか？

行動規範の内容に同意します

回答1件

ベストアンサー

#backがクリックされるとheaderBackButton()が呼ばれるのだとしたら、クリックするたびに$("#back").click()が実行される。つまり、クリックするたびにaddEventListenerを行っているわけで、イベントリスナーが増つづけます。結果、１回のクリックで$("#back").click()で登録した処理が実行される回数が増えていきます。
書くとしたら、$("#back").click()は無しにするべきだと思います。

js
1function headerBackButton() {
2    if(currentState == "indivisual"){
3        backToGallery();
4        console.log("backToGallery");
5        return false;
6    }else if(currentState == "gallery"){
7        backToHome();
8        console.log("backToHome");
9        return false;
10    }
11}