読者です 読者をやめる 読者になる 読者になる

jQuery イベントRangeError: Maximum call stack

典型的な jQuery イベント発生のエラーだと思うが、
td タグ内に、radio ボタンを設置して以下のような JavaScript(jQuery)を書いた。

$('#selectGroup td').click(function(){
   $(this).children(':radio').trigger('click');
});
$('#selectGroup :radio').click(function(){
   $('#selectGrid_tbody td').removeClass('ui-selected');
   $(this).parent().addClass('ui-selected');
});


これは、

  Uncaught RangeError: Maximum call stack size exceeded

を引き起こしてしまう。

radio ボタンのクリック受信でイベントが以後、伝播するのを停止すれば良いのだが、return falsepreventDefault() は、ダメ!

stopPropagation() か、stopImmediatePropagation() を実行することで
このスタックの食いつぶしが起こらないようにイベントを停止できる。

stopImmediatePropagation() なら、他に設定されたリスナへの伝播も停止される。

このstopImmediatePropagation() を使って

$('#selectGroup td').click(function(){
   $(this).children(':radio').trigger('click');
});
$('#selectGroup :radio').click(function(e){
   $('#selectGrid_tbody td').removeClass('ui-selected');
   $(this).parent().addClass('ui-selected');
   e.stopImmediatePropagation();
});


としたら、エラーは発生しなくなる。このとき、Wicket で Radio ボタンの選択変更のイベントを
拾って制御するのは、できなくなるのでは?と思ったが、、
RadioGroup に、AjaxFormChoiceComponentUpdatingBehavior をセットして、onUpdate メソッドは、思いどおりに動いた。。