チェックボックス.. jqueryの再帰の問題

Question

このコードは、再帰的な行動を起こし..

は、私がスパンでテキストをクリックしてご確認ください/子入力のチェックを外すことができるようにしたいと子入力のclickイベントをトリガーします。

http://jsfiddle.net/cwfontan/ALEBr/

 <span class="RedHover"> 
      <input type="checkbox" name="chkShowBusn" id="chkShowBusn" tabindex="9" />Business 
     </span> 



$('.RedHover').click(
     function (e) { 
      try { 
       $(this).children('input').trigger('click'); 
       e.stopPropagation(); 
       e.preventDefault(); 
       console.log('here'); 
      } catch (e) { 
       //handle no click event.alert 
       console.log(e.description); 
      } 
     } 
    ); 

Answer 1

問題は、イベントが、その後バブルアップ及びspanに処理されるinput要素でトリガすることです。これは元のイベントと、プログラムで発生したイベントに対して発生します。

ソリューションは、イベントがinput要素で発信されたかどうかを確認するために、そしてそれがなかった場合は、それを処理するためではない、おそらくです：

$('.RedHover').click(
    function (e) { 
     if (e.target.nodeName.toLowerCase() !== 'input') { 
      $(this).children('input').trigger('click'); 
      e.stopPropagation(); 
      e.preventDefault(); 
      console.log('here'); 
     } 
    } 
); 

try/catchは不要だった、jQueryのイベントは常にオブジェクトことを保証しますあなたが使っている方法があります。

予想される動作に応じて、stopPropgationおよびpreventDefaultに電話をかけることがあります。は不要です。

---

spanには1人の子供しかいないため、これは別の方法で行うことができます。 this（常にイベントが処理される要素、span）はe.target（イベントの発生元の要素、のいずれかspanまたはinput）と同じである場合は、続行することができます。このよう

$('.RedHover').click(
    function (e) { 
     if (this === e.target) { 
      $(this).children('input').trigger('click'); 
      e.stopPropagation(); 
      e.preventDefault(); 
      console.log('here'); 
     } 
    } 
); 

注意をnodeNameをチェックするよりもはるかに安定していません。将来あなたのHTMLを変更した場合、このコードが破損する可能性があります。あなたはとても

$('input[type=checkbox]').click(function(e){ 
    e.stopPropagation(); 
       e.preventDefault(); 
}); 

チェックこのjsfiddle

Answer 2

<input type="checkbox" name="chkShowBusn" id="chkShowBusn" tabindex="9" /> 
<label for="chkShowBusn">Business</label> 

そしてあなたも、jQueryのを必要としません...同様の問題があり、これが解決策であることがわかりました。

HTML

<span for="chkCheckbox"> 
    <input id="chkCheckbox" type="checkbox" /> 
    <label for="chkCheckbox">My Checkbox Label</label> 
</span> 

のJavascript（jQueryのに拡大することは、それが@lonesomedayが回答されて以来、私は、それを含めておりません簡単ですし、私はいつも別のライブラリを使用して上でJavascriptを好む）

var checkboxSpans = document.querySelectorAll("span[for]"); 

for (var i = 0; i < checkboxSpans.length; i++) { 
    var forCheckbox = checkboxSpans[i].getAttribute("for"); 
    forCheckbox = document.getElementById(forCheckbox); 

    if (forCheckbox != null) { 
     checkboxSpans[i].onclick = function (chk) { 
      return function (e) { 
       if (this === e.target) { 
        e.stopPropagation(); 
        e.preventDefault(); 
        if (chk.checked != true) { 
         chk.checked = true; 
        } else { 
         chk.checked = false; 
        } 
       } 
      } 
     }(forCheckbox); 
    } 
} 

この方法では、ラベルを使用する場合と同じように使用できます。これは実際にどのタイプの要素にも追加できます。

これは、@lonesomedayによって提供された回答から拡張されました。

Answer 3

Answer 4

Iのように、チェックボックスのクリックで伝播を停止することができ