【JS】ページ読み込み後１度目のクリックと２度目のクリックで挙動が変わる

Question

var flag = document.forms.hoge.elements['fuga'].checked;

で条件判定をしようと思っています。

しかしページを開いた後、上記コードを含む関数を呼び出す要素（<span>）の１度目のクリックではflagにnodefindが入ってしまいます。
ただし、再度クリックすると想定通りの値（true||false）が入ります。

構造としては
①
function hogehoge()
にてFORMのINPUT要素をprepend()で追加
その際、同時にonClick(fugafuga)も追加

②
function fugafuga()が呼びだされた際、冒頭の条件判定を実施

と行いたいです。

具体的なコードは以下です。

function InlineChange(data){
	var addpanel = '<span style=\"display:none;\" id=\"ck' + data.id + '\" onClick=\"SpcsCk(' + data.id + ')\"></span><span id=\"ckd' + data.id + '\" onClick=\"SpcsCk(' + data.id + ')\"></span><input id=\"check' + data.id + '\" type =\"checkbox\" style=\"display:none;\" name=\"spcs[]\" value=\"' +data.name + '\" checked=\"checked\"><section style=\"display:none;\"><span style=\"display:none;\" id=\"ck_b' + data.id + '\" onClick=\"SpcsCk(' + data.id + ')\"></span><span id=\"ckd_b' + data.id + '\" onClick=\"SpcsCk(' + data.id + ')\"></span></section>';
	var element = document.getElementById('spcs');
	$(element).prepend(addpanel);
}

function SpcsCk(id){
	var ck = "ck" + id;
	var ckd = "ckd" + id;
	var ck_b = "ck_b" + id;
	var ckd_b = "ckd_b" + id;
	var ckflag = document.forms.log.elements['check'+id].checked;

	if(ckflag == true){
		document.getElementById(ckd).style.display = "none";
		document.getElementById(ck).style.display = "";
		document.getElementById(ckd_b).style.display = "none";
		document.getElementById(ck_b).style.display = "";
		document.forms.log.elements['check'+id].checked = false;
	}else{
		document.getElementById(ck).style.display = "none";
		document.getElementById(ckd).style.display = "";
		document.getElementById(ck_b).style.display = "none";
		document.getElementById(ckd_b).style.display = "";
		document.forms.log.elements['check'+id].checked = true;
	}
}

全く動作しないのではなく、２度目のクリックで動作するというということは、まるっきりおかしいわけではないかと思っているのですが、原因、もしくは頻出ミス等、ヒントだけでもお分かりになるかたがいらっしゃいましたら、ご教授お願い致します。

Comments

[shi_ue]

なんで、prependとかjqueryを使っているのに、ほかのところではjqueryを使わないんですか？修行？

[shi_ue]

InlineChangeはどのタイミングで呼び出されるですか？SpcsCkが呼び出される際に、まだ要素が作られていないようですけど。

[TakuHosoya]

shi_ueさん

ありがとうございます。
＞なんで、prependとかjqueryを使っているのに、ほかのところではjqueryを使わないんですか？修行？
⇒付け焼き刃の知識で、jqueryの活用方法についてよくわかっていないというのが正直なところです。

＞InlineChangeはどのタイミングで呼び出されるですか？SpcsCkが呼び出される際に、まだ要素が作られていないようですけど。
⇒Ajax通信の後、InlineChangeを呼び出します。
その後、InlineChangeで作られた要素にのみSpcsCkを呼び出すボタンが出ます。

一晩明けて、特に何もいじっていないのにも関わらず想定通りの挙動になりました…
こんなことはあるのでしょうか？

厳密にはインデントの整理はしましたが…

Answer 1

直っちゃった、ということなので、いただいているソースをJQueryで直してみます。
見やすいように長ーい代入文を区切ってます。

function InlineChange(data) {
  var addpanel =
  '<span style="display:none;" id="ck' + data.id + '" onClick="SpcsCk(' + data.id + ')"></span>'+
  '<span id="ckd' + data.id + '" onClick="SpcsCk(' + data.id + ')"></span>'+
  '<input id="check' + data.id + '" type ="checkbox" style="display:none;" '+
  'name="spcs[]" value="' +data.name + '" checked><section style="display:none;">'+
  '<span style="display:none;" id="ck_b' + data.id + '" onClick="SpcsCk(' + data.id + ')"></span>'+
  '<span id="ckd_b' + data.id + '" onClick="SpcsCk(' + data.id + ')"></span></section>';
  $('#spcs').prepend(addpanel);
}

function SpcsCk(id) {
  $('#ckd'+id).toggle();
  $('#ck'+id).toggle();
  $('#ckd_b'+id).toggle();
  $('#ck_b'+id).toggle();
  $('#check'+id).prop('checked', !$('#check'+id).prop('checked'));
}
```こうして修正してみると、ダブルコーテーションに一々￥でエスケープしてましたけど、シングルコーテーションの中なので不要です。
また、表示非表示をJQueryに任せると、if文さえ要りません。
`document.getElementById(～)`と書いていたものが`$('#～')`と短くなります。

検証してみましたが、InlineChangeさえ呼ばれれば動作しました。

Comments

[TakuHosoya]

わざわざご丁寧にありがとうございます！
勉強になります！