ラベルをクリックするとjQuery Clickが2回起動する

jQueryを使用してカスタムラジオボタンを作成していますが、問題があります。ラジオに関連付けられているラベルをクリックすると、クリックイベントが2回発生します。ラジオ自体のみをクリックすると、正常に機能します（実際には、クリックしているのはラジオではなく、入力とラベル全体をラップしているdivです）。これがコードです：

HTML：

 <div id="box">
     <asp:RadioButtonList ID="RadioButtonList1" runat="server">
         <asp:ListItem>RADIO1</asp:ListItem>
         <asp:ListItem>RADIO2</asp:ListItem>
         <asp:ListItem>RADIO3</asp:ListItem>
     </asp:RadioButtonList>
</div>

jQuery：

<script type="text/javascript">
       $(function () {
            $('#box').find('input:radio').each(function (i) {

            var input = $(this);
            // get the associated label using the input's id
            var label = $('label[for=' + input.attr('id') + ']');
            // wrap the input + label in a div
            $('<div class="custom-radio"></div>').insertBefore(input).append(label, input);

            var wrapperDiv = input.parent();

            // find all inputs in this set using the shared name attribute
            var allInputs = $('input[name=' + input.attr('name') + ']');

            // necessary for browsers that don't support the :hover pseudo class on labels
            label.hover(

            function () {
                $(this).addClass('hover');
            }, function () {
                $(this).removeClass('hover checkedHover');
            });

            //bind custom event, trigger it, bind click,focus,blur events
            wrapperDiv.bind('updateState', function () {
                if ($(this)[0].children[1].checked) {
                    allInputs.each(function () {
                        var curDiv = $('div > label[for=' + $(this).attr('id') + ']').parent();
                        curDiv.removeClass('custom-radio-checked');
                        curDiv.addClass('custom-radio');
                    });
                    $(this).toggleClass('custom-radio custom-radio-checked');
                }
                else {
                    $(this).removeClass('custom-radio-checked checkedHover checkedFocus');
                }

            })
            .trigger('updateState')
            .click(function () { console.log('click'); })
            .focus(function () {
                label.addClass('focus');
            }).blur(function () {
                label.removeClass('focus checkedFocus');
            });
        }); 
       });
   </script>

この動作の解決策はありますか？

追加してみてください：

evt.stopPropagation();
evt.preventDefault();

表示されている.bind（）または.click（）のいずれかに。また、次のevtように関数にパラメータを追加しますfunction(evt) {...

上記のソリューションを追加してみました：

evt.stopPropagation();
evt.preventDefault();

しかし、うまくいきませんでした。しかしこれを追加する：

evt.stopImmediatePropagation();

問題を解決しました！:)

クリックイベントをラベルではなく入力にバインドします。ラベルがクリックされたとき-ダスティンが述べたように、ラベルをクリックすると入力がクリックされるため、イベントは引き続き発生します。これにより、ラベルは通常の機能を保持できます。

$('input').click();

の代わりに

$('label').click();

外側のコンテナーをクリック要素として使用する場合は、イベントを自然にバブルさせて、クリックハンドラーで期待される要素をテストすることもできます。このシナリオは、フォームの一意のクリックゾーンのスタイルを設定する場合に役立ちます。

<form>
<div id="outer">
    <label for="mycheckbox">My Checkbox</label>
    <input type="checkbox" name="mycheckbox" id="mycheckbox" value="on"/>
</div>
</form>
<script>
$('#outer').on('click', function(e){
    // this fires for #outer, label, and input
    if (e.target.tagName == 'INPUT'){
        // only interested in input
        console.log(this);
    }
});
</script>

これを簡単に修正するには、ラベルの「for」属性を削除します。ラベルをクリックすると、関連する要素もクリックされます。（あなたの場合、これはあなたのクリックイベントを2回発生させています。）

幸運を

私は通常このシンタックスを使います

.off('click').on('click', function () { console.log('click'); })

の代わりに

.click(function () { console.log('click'); })

ベストアンサーはコメントの中に隠されています：

changeラベルのテキストはクリック可能であるため、実際にはラジオボタンでもバインドする必要があります。ラベルが常にラジオボタン自体をクリックするとは限りません。- chovy 1時45分で、12月12日'13

このバイオリンは -他のすべてのソリューションということを示しstopPropagation、stopImmediatePropagation、preventDefault、return false-のいずれかの変化は何もしたり、チェックボックス/ラジオ機能を破壊します）。また、これはjQueryの問題ではなく、JavaScriptの一般的な問題であることも示しています。

編集： 私が別のスレッドで見つけた別の実用的な解決策onclickは、ラベルではなく入力にをバインドすることです。フィドルを更新しました。

解決策を追加してみました。

evt.stopPropagation();
evt.preventDefault();

しかし、うまくいきませんでした。

追加することにより

evt.stopImmediatePropagation();

問題を解決しました！:)

e.preventDefault（）;の問題 ラベルのクリックでラジオボタンがチェックされないようにするためです。

より良い解決策は、次のように単に「チェックされている」クイックチェックを追加することです。

$("label").click(function(e){
  var rbtn = $(this).find("input");
  if(rbtn.is(':checked')){
  **All the code you want to have happen on click**
  }
)};

私の問題は少し異なり、evt.stopPropagation();evt.preventDefault();私にとってはうまくいかないのでreturn false;、最後に追加するだけでうまくいきます。

$("#addressDiv").on("click", ".goEditAddress", function(event) {
    alert("halo");
    return false;
});

私の場合の問題は、関数にクリックイベントがあり、その関数が2回実行されたことです。関数を実行するたびに、新しいクリックイベントが作成されます。- 手のひらを顔に当てます -

関数の外でクリックイベントを移動した後、すべてが期待どおりに機能しました。:)

labelタグはクリックをエミュレートするため、入力タグをトリガー要素の外側に配置してみてください。これにより、常に複数の呼び出しが発生します。

radio_divに接続されたハンドラーを使用して、このようにラベル内にラジオをネストしたため、同じ問題が発生しました。ネストされたラベルを削除すると、問題が修正されました。

<div id="radio_div">
    <label>
       <input type="radio" class="community_radio" name="community_radio" value="existing">
           Add To Existing Community
    </label>
</div>

ラベルにより、ラジオ/チェックボックスがチェックされます。

if ($(event.target).is('label')){
    event.preventDefault();
}

特にラベルがこの動作をトリガーするのを防ぎます。

for = "some-id"属性を持つラベルをクリックすると、新しいクリックがトリガーされますが、ターゲットが存在し、それが入力である場合のみです。私がいたではない、私はこのようにそれをしなかったので（e.preventDefaultと完全にそれを解決することができ）、またはそのようなもの：

たとえば、この構造があり、.some-classをクリックしたときにイベントが必要な場合

<div class="some-class">
    <input type=checkbox" id="the-input-id" />
    <label for="the-input-id">Label</label>
</div>

何がうまくいったか：

$(document)
    .on('click', '.some-class', function(e) {
        if(
            $(e.target).is('label[for]')
            &&
            $('input#' + $(e.target).attr('for')).length
        ) {
            // This will trigger a new click so we are out of here
            return;
        }

        // else do your thing here, it will not get called twice
    })
;