jQuery Click, etikete tıklandığında iki kez tetikleniyor

Özel radyo düğmeleri oluşturmak için jQuery kullanıyorum ve bir sorunum var. Telsizle ilişkili etikete tıkladığımda tıklama olayları iki kez tetikleniyor, sadece telsizin kendisine tıklarsam iyi çalışıyor (aslında tıkladığım radyo değil, tüm girişi ve etiketi saran div). İşte kod:

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>

Bu davranış için herhangi bir çözüm var mı?

Eklemeyi deneyin:

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

.bind () veya .click (), hangisini görüyorsanız. Ayrıca, parametreyi evtişleve ekleyin , örneğinfunction(evt) {...

Yukarıdaki çözümü ekleyerek eklemeyi denedim:

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

ama işe yaramadı. Ancak şunu eklemek:

evt.stopImmediatePropagation();

sorunu çözdü! :)

Tıklama etkinliğini etiket yerine girişe bağlayın. Etiket tıklandığında - etkinlik yine de gerçekleşir çünkü Dustin'in bahsettiği gibi, etikete yapılan tıklama girişin tıklanmasını tetikler. Bu, etiketin normal işlevselliğini korumasına izin verecektir.

$('input').click();

Onun yerine

$('label').click();

Tıklama öğesi olarak bir dış kapsayıcı kullanmaya çalışıyorsanız, olayların doğal olarak kabarmasına izin verebilir ve tıklama işleyicinizde beklenen öğeyi test edebilirsiniz. Bu senaryo, bir form için benzersiz bir tıklama bölgesinin stilini belirlemeye çalışıyorsanız kullanışlıdır.

<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>

Bunu kolay bir şekilde düzeltmek için, etiket üzerindeki "for" özelliğini kaldırın. Etikete bir tıklama aynı zamanda ilişkili öğenin de tıklanmasını tetikleyecektir. (sizin durumunuzda tıklama etkinliğinizi iki kez tetikliyor.)

İyi şanslar

Genellikle bu synthax'ı kullanırım

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

onun yerine

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

En iyi cevap yorumların içinde gizlidir:

changeBir etiketin metni tıklanabilir olduğundan, radyo düğmesine bile bağlamanız gerekir - her zaman radyo düğmesinin kendisine tıklamazlar. - chovy 12 Aralık 2013 , 1:45

Bu keman - Diğer tüm çözümler göstermektedir stopPropagation, stopImmediatePropagation, preventDefault, return false- değişiklik hiçbir şey ya ya) onay kutusu / radyo işlevselliği yok. Ayrıca bunun bir jQuery sorunu değil, vanilya JavaScript sorunu olduğunu da göstermektedir.

DÜZENLEME: Başka bir iş parçacığında bulduğum başka bir çalışma çözümü onclick, etiket yerine girişe bağlamaktır . Güncellenmiş keman .

Çözüm ekleyerek denedim.

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

ama işe yaramadı.

Toplayarak

evt.stopImmediatePropagation();

sorunu çözdü! :)

E.preventDefault () ile ilgili sorun; etiket tıklamasının radyo düğmesini kontrol etmesini durdurması mı?

Daha iyi bir çözüm, şöyle bir "kontrol edildi" hızlı kontrolü eklemek olacaktır:

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

Benim sorunum biraz farklı, çünkü evt.stopPropagation();evt.preventDefault();benim için işe yaramıyor, sadece return false;sonunda ekliyorum , sonra çalışıyor.

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

Benim durumumda sorun, bir işlevde tıklama olayına sahip olmam ve işlevin iki kez çalıştırılmasıydı .... işlevin her yürütülmesi yeni bir tıklama olayı oluşturur. - yüz maskesi -

tıklama olayını işlevin dışına taşıdıktan sonra, her şey beklendiği gibi çalıştı! :)

Giriş etiketinizi tetikleyici öğenin dışına koymayı deneyin, çünkü etiket tıklamaya öykünür, böylece her zaman birden fazla çağrınız olur.

Aynı sorunu yaşadım çünkü radyomu radyo_div'e bağlı işleyici ile bu etiketin içine yerleştirmiştim. Yuvalanmış etiketin kaldırılması sorunu çözdü.

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

Etiket, işaretlenecek radyo / onay kutusunu tetikler.

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

Özellikle etiketin bu davranışı tetiklemesini engeller.

For = "some-id" özniteliğine sahip etikete yapılan tıklama, yeni bir tıklamayı tetikler, ancak yalnızca hedef varsa ve bir girişse. Ben değil e.preventDefault () veya şeylerle mükemmel şekilde çözebilecek gibi ben böyle yaptım bu yüzden:

Örneğin, bu yapıya sahipseniz ve .some-class seçeneğine tıklayarak bir olay istiyorsanız

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

Ne işe yaradı:

$(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
    })
;