Jquery でループ処理で無いのに、なぜかif制御文が2度実行される。

Question

JQueryのプラグインColorbox とslidebars を用いて開発をしています。
sidebarsに形成されたラベルをクリックすると
他の要素に追加されたり削除したりします。以下はsidebarsの状態です。
また、colorboxので生成された要素をクリックすると以下のsidebarsの要素に追加されます。

<div class="checkbox" id="additional_member">
<input type="checkbox" name="checkbox_member" id="sidebar_member1" class="cb_member" value="155">
<label for="sidebar_member1" class="sb_member checked" id="lb_sb1">
<span id="member_name1">TEST1</span>
</label>

<input type="checkbox" name="checkbox_member" id="sidebar_member2" class="cb_member" value="025">
<label for="sidebar_member2" class="sb_member" id="lb_sb2">
<span id="member_name2">TEST2</span>
</label>
</div>

colorboxの要素をクリックしてsidebarsに追加されたラベルをクリックしても色が反転しません。
以下にsidebarsにて他の要素に転送するJSを記載しますが、下側のJSで
if($("div#additional_member label:eq(" + index + ")").hasClass("checked")){
の判定を行い処理を行うのですが、何故か再び処理を繰り返す挙動を示し、色の反転や転送動作が動きません。どこがおかしいのか分からず困っています。

ただ、初期からsidebarsにある要素は色の反転とか稼働します。

     //sidebarsからさらに転送をしたり削除したり
	$('#additional_member').on('click', '.sb_member', function(){
		var index	=	$(".sb_member").index(this);
		var val		=	$("#sidebar_member" + ( index +1 ) ).val();
		var jn		=	$("#jobnumber").val();
		var str		=	$("span#member_name" + ( index +1 )).html();
		//現在のラベルがチェックされているとき
		if($("div#additional_member label:eq(" + index  + ")").hasClass("checked")){
			//hidden 項目を削除する
			$("div#add_member input").filter(function(){
				return $(this).val() == val;
			}).remove();
			//メンバー一覧から削除
			$("ul#member_list li").filter(function(){
				return $(this).text() == str;
			}).remove();
			//サイドバーを検索して色を変更する場所を探す
			var j = 0;
			var pos = 0;
			$("div#additional_member input").filter(function(){
				if(val == $(this).val()){
					pos = j;
				}
				j++;
			});
			$("div#additional_member label:eq(" + pos + ")").removeClass('checked');
			return false;
		}else{
			var count_li	=	$("ul#member_list li").length;
			$('<input>').attr({
				type: 'hidden',
				class: 'member',
				id: 'member_id' + (index + 1),
				name: 'member[]',
				value: val
			}).appendTo('div#add_member');
			//サイドバーを検索して色を変更する場所を探す
			var j = 0;
			var pos = 0;
			$("div#additional_member input").filter(function(){
				if(val == $(this).val()){
					pos = j;
				}
				j++;
			});
			$("div#additional_member label:eq(" + pos + ")").addClass('checked');
			//string for assigned member section
			var str_li = '<li id="list_elm' + (count_li + 1) + '">' + str + '</li>';
			//POSTデータ一覧
			var j	=	0;
			$("div#add_member input").filter(function(){
				if(val == $(this).val()){
					j++;
				}
			});
			//メンバー一覧
			var j	=	0;
			$("ul#member_list li").filter(function(){
				if(str == $(this).text()){
					j++;
				}
			});
			//存在しない場合は追加
			if(j == 0){
				$('ul#member_list').append(str_li);
			}
			return false;
		}
	});

（追記）
問題点
2つの領域（colorbox、sidebars）に項目（label）が表示されている
初期状態で表示されている sidebarsの領域の項目（Label）をクリックすると別領域に項目が追加・削除される。

ところが、

1. colorboxの項目（Label）をクリックするとsidebarsの領域にコピーされる。
2. sidebarsの領域に追加された項目（Label）をクリックしても他の領域に項目が追加・削除されない。（labelの色が変化しない）

※現象としてデバッグすると
if($("div#additional_member label:eq(" + index + ")").hasClass("checked")){
の処理が繰り返し行われているようです。

原因が全く分からず、途方に暮れています。
宜しくお願いいたします。

Comments

[Lhankor_Mhy]

補足願います。『sidebarsの領域』とはご提示のHTMLソースで言うとどこですか？　どうもご提示のソースを動かしてみましたが、『sidebarsの領域にコピーされる』という動作が確認できないように思えます。

[yambejp]

#add_memberでつかもうとしているidはid="additional_member"のdivのことでしょうか？それとも別に存在するのでしょうか？

[hidepon]

div のid="addmember"はpost送信するためのhidden 要素を格納する場所です。div id="additional_member"で選択された内容を移送します。

[yambejp]

そうなるとid="add_member"のソースも表示しないと追いかけられないような気がします

[hidepon]

ご返答有難うございます。id="add_member"のソースは　<div id="add_member"></div>というシンプルなパーツです。ここにhidden 項目をappendしていきます。項目が重複していたら入れないし、選択解除で削除します

[yambejp]

ちょっと省略されているところも含めて、何をしたらどうなるという仕様を書いていただいたほうがよいかもしれません。labelのcheckedやらなにやらチェックボックスとダブルバインドしているような使いかたですし、なによりチェックボックスが機能していなかったりいまいち何がしたいかわかりません

Answer 1

何故か再び処理を繰り返す挙動を示し

これはなぜわかりました？ alertでチェックしてみたら2回出てきたってところでしょうか？

alert("登録");
$('#additional_member').on('click', '.sb_member', function(){

ここにalertを置いて確認してみてください。
.on()は、そこを通るごとにイベント処理を追加するメソッドです。
「登録」が2回表示されたら、2回登録しているせいで、2回処理するようになってしまっているということです。

Comments

[hidepon]

ご返答有難うございます。alert("登録");を置いてみましたが、2回出るということはありませんでした。
一点気になることがあって、これから確認をしようと思うのですが、JQueryのバージョンが1.1系になっています。これは原因として考えることは出来るでしょうか？今から実際に確認をしてみます。よろしくお願いいたします。

[zohnam]

それはあるかもしれないですね。だいたいみんな最新の機能を前提に回答されるはずですので。いまの最新は3.2.1でしたかね。それにしておいたほうが無難です。

[hidepon]

ご返答有難うございます。結果としては状況変わらずでした。何がなんだか？？？プラグイン側の問題とは思いたくないので・・・

[zohnam]

「何故か再び処理を繰り返す挙動を示し」この部分を、どうやって調べたのか教えてください。

[hidepon]

if($("div#additional_member label:eq(" + index + ")").hasClass("checked")){
に　alert("a");
}else{
にalert("b");
を仕込みました。
でチェックがない状態でラベルをクリックすると　”ｂ”と出力して、その次に"a"と出力されました。
なんか「ループしてない？」というキモチ悪イ感じです

[yambejp]

ifのtrue/false両方反応するならifの前にalert("c")を入れてみてはどうでしょう？

[hidepon]

ご返答有難うございます。早速やってみます。現象としては、初期状態としては b が出力されて最後まで処理をされるようで、その後関数の上から（仕込んだ）alert が反応しはじめてa と出力されます。世にも奇妙な状態です。なにか爆弾（だれかが仕掛けたトラップ？）があるのかな？？？と思っていたりします。

[zohnam]

デベロッパーツールとconsole.logの使い方はわかりますか？
もうalertでのデバッグでなんとかなる段階ではなくなっていると思います。
変数に設定するごとにconsole.logを仕込んで、予定通りの数字になっているのか、洗い出してみて下さい。

[hidepon]

developer tool は普段から良く利用しています。console.log の使い方はイマイチです。
使い方って結構むずかしいですよね・・・

[zohnam]

var str = $("span#member_name" + ( index +1 )).html();
console.log(["top",index,val,jn,str]);

こういう風にすれば、クリックして最初に設定している4変数の値を一気に確認できます。
"top"は、単に序盤だよってことを示すだけのラベルです。
他の行にも console.logを入れまくると、何の変数が表示されるのかわからなくなってくるから、こういうふうに名前をつけてわかりやすくします。

[hidepon]

ご返答有難うございます。いつもいつも本当に素晴らしいご助言を頂き感謝です。早速、実行してみます。

[hidepon]

有難うございます。原因がわかりました。外部のファイルを読み込んでいたのですが。そこに同じモジュールが組み込まれていました。全く気付かなかったです。

[hidepon]

本当にスミマセンでした。colorboxで外部ファイルをaタグで利用することができるのですが、そのファイルにこのJSをインクルードしていました。恥ずかしくて・・・どこかに隠れたい気分です・・・orz

[zohnam]

しょーもないミスをやらかしながら人は成長していくものです。
console.logを使いこなして、今後も開発がんばってください。