Klik jQuery menyala dua kali saat mengklik label

Saya menggunakan jQuery untuk membuat tombol radio khusus dan saya punya masalah. Saat mengklik label yang terkait dengan radio, peristiwa klik akan menyala dua kali, jika saya hanya mengklik di radio itu sendiri, itu berfungsi dengan baik (sebenarnya bukan radio yang saya klik tetapi div yang membungkus seluruh input dan label). Ini kodenya:

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>

Apakah ada solusi untuk perilaku ini?

Coba tambahkan:

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

ke .bind () atau .click (), mana saja yang Anda lihat. Juga, tambahkan parameter evtke fungsi, sepertifunction(evt) {...

Saya mencoba menambahkan solusi di atas dengan menambahkan:

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

tapi tidak berhasil. Namun menambahkan ini:

evt.stopImmediatePropagation();

memecahkan masalah! :)

Ikat acara klik ke masukan, bukan ke label. Ketika label diklik - peristiwa akan tetap terjadi karena, seperti yang disebutkan Dustin, klik pada label memicu klik pada input. Ini akan memungkinkan label untuk mempertahankan fungsi normalnya.

$('input').click();

Dari pada

$('label').click();

Jika Anda mencoba menggunakan penampung luar sebagai elemen klik, Anda juga dapat membiarkan peristiwa menggelembung secara alami dan menguji elemen yang diharapkan di penangan klik Anda. Skenario ini berguna jika Anda mencoba memberi gaya zona klik unik untuk formulir.

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

Untuk memperbaikinya dengan cara mudah, hapus atribut "for" pada label. Klik pada label juga akan memicu klik pada elemen terkait. (yang dalam kasus Anda mengaktifkan peristiwa klik dua kali.)

Semoga berhasil

Saya biasanya menggunakan synthax ini

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

dari pada

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

Jawaban terbaik tersembunyi di dalam komentar:

Anda harus mengikatnya changebahkan pada tombol radio karena teks label dapat diklik - mereka tidak selalu mengeklik tombol radio itu sendiri. - chovy 12 Desember '13 pukul 1:45

Ini biola menggambarkan bahwa semua lainnya solusi - stopPropagation, stopImmediatePropagation, preventDefault, return false- baik perubahan apa-apa atau menghancurkan kotak centang / fungsi radio). Ini juga menggambarkan bahwa ini adalah masalah JavaScript vanilla, bukan masalah jQuery.

EDIT: Solusi kerja lain yang baru saja saya temukan di utas lain adalah mengikat onclickke input daripada label. Biola diperbarui .

Saya telah mencoba dengan menambahkan solusi.

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

tapi tidak berhasil.

Dengan menambahkan

evt.stopImmediatePropagation();

memecahkan masalah! :)

Masalah dengan e.preventDefault (); apakah itu menghentikan klik label dari memeriksa tombol radio.

Solusi yang lebih baik adalah dengan menambahkan pemeriksaan cepat "dicentang" seperti ini:

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

Masalah saya sedikit berbeda, karena evt.stopPropagation();evt.preventDefault();tidak berhasil untuk saya, saya hanya menambahkan return false;di bagian akhir, lalu berhasil.

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

Dalam kasus saya, masalahnya adalah saya memiliki acara klik dalam suatu fungsi dan fungsi tersebut dijalankan dua kali .... setiap eksekusi fungsi tersebut membuat acara klik baru. - Telapak tangan -

setelah memindahkan peristiwa klik di luar fungsi, semuanya bekerja seperti yang diharapkan! :)

Coba letakkan tag masukan Anda di luar elemen pemicu, karena tag label mengemulasi klik, jadi Anda akan selalu memiliki lebih dari satu panggilan.

Saya memiliki masalah yang sama karena saya telah menempatkan radio saya di dalam label seperti ini dengan penangan yang terpasang ke radio_div. Menghapus label bertingkat memperbaiki masalah.

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

Label memicu radio / kotak centang untuk dicentang.

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

Ini mencegah terutama label untuk memicu perilaku ini.

Klik pada label dengan atribut for = "some-id" memicu klik baru, tetapi hanya jika target ada dan merupakan masukan. Saya tidak dapat menyelesaikannya dengan sempurna dengan e.preventDefault () atau hal-hal seperti itu jadi saya melakukannya seperti ini:

Misalnya, jika Anda memiliki struktur ini dan menginginkan acara dengan mengklik .some-class

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

Apa yang berhasil adalah:

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