jQuery Click kích hoạt hai lần khi nhấp vào nhãn

Tôi đang sử dụng jQuery để tạo các nút radio tùy chỉnh và tôi gặp sự cố. Khi nhấp vào nhãn liên kết với radio, các sự kiện nhấp chuột sẽ kích hoạt hai lần, nếu tôi chỉ nhấp vào radio thì nó hoạt động tốt (thực ra không phải radio mà tôi đang nhấp mà là div bao bọc toàn bộ đầu vào và nhãn). Đây là mã:

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>

Có giải pháp nào cho hành vi này không?

Hãy thử thêm:

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

sang .bind () hoặc .click (), bất kỳ cái nào bạn đang thấy. Ngoài ra, hãy thêm tham số evtvào hàm, nhưfunction(evt) {...

Tôi đã thử thêm giải pháp ở trên bằng cách thêm:

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

nhưng không hoạt động. Tuy nhiên thêm điều này:

evt.stopImmediatePropagation();

Đã giải quyết vấn đề! :)

Liên kết sự kiện nhấp chuột với đầu vào thay vì nhãn. Khi nhãn được nhấp vào - sự kiện vẫn sẽ xảy ra vì như Dustin đã đề cập, một lần nhấp vào nhãn sẽ kích hoạt một lần nhấp vào đầu vào. Điều này sẽ cho phép nhãn giữ chức năng bình thường của nó.

$('input').click();

Thay vì

$('label').click();

Nếu bạn đang cố gắng sử dụng vùng chứa bên ngoài làm phần tử nhấp chuột, bạn cũng có thể để các sự kiện bong bóng tự nhiên và kiểm tra phần tử mong đợi trong trình xử lý nhấp chuột của bạn. Tình huống này hữu ích nếu bạn đang cố gắng tạo kiểu cho vùng nhấp chuột duy nhất cho biểu mẫu.

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

Để khắc phục điều này một cách dễ dàng, hãy xóa thuộc tính "for" trên nhãn. Một lần nhấp vào nhãn cũng sẽ kích hoạt một lần nhấp vào phần tử được liên kết. (trong trường hợp của bạn sẽ kích hoạt sự kiện nhấp chuột của bạn hai lần.)

Chúc may mắn

Tôi thường sử dụng cú pháp này

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

thay vì

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

Câu trả lời hay nhất được ẩn bên trong các bình luận:

bạn thực sự nên liên kết với changengay cả trên nút radio vì văn bản của nhãn có thể nhấp được - chúng không phải lúc nào cũng nhấp vào chính nút radio. - chovy 12/1213 lúc 1:45

Đây fiddle minh họa rằng tất cả các giải pháp khác - stopPropagation, stopImmediatePropagation, preventDefault, return false- một trong hai thay đổi gì hoặc phá hủy các chức năng hộp / radio). Nó cũng minh họa rằng đây là một vấn đề JavaScript vani, không phải là một vấn đề jQuery.

CHỈNH SỬA: Một giải pháp làm việc khác mà tôi vừa tìm thấy trong một luồng khác là liên kết onclickvới đầu vào thay vì nhãn. Cập nhật fiddle .

Tôi đã thử bằng cách thêm giải pháp.

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

nhưng không hoạt động.

Bằng cách thêm

evt.stopImmediatePropagation();

Đã giải quyết vấn đề! :)

Sự cố với e.preventDefault (); là nó ngăn việc nhấp vào nhãn kiểm tra nút radio.

Một giải pháp tốt hơn là chỉ cần thêm kiểm tra nhanh "được kiểm tra" như sau:

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

Vấn đề của tôi hơi khác một chút, vì evt.stopPropagation();evt.preventDefault();nó không phù hợp với tôi, tôi chỉ thêm return false;vào cuối cùng, sau đó nó hoạt động.

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

Trong trường hợp của tôi, vấn đề là tôi có sự kiện nhấp chuột trong một hàm và hàm được thực thi hai lần .... mỗi lần thực thi hàm sẽ tạo ra một sự kiện nhấp chuột mới. - facepalm -

sau khi di chuyển sự kiện nhấp chuột ra bên ngoài chức năng, mọi thứ hoạt động như mong đợi! :)

Hãy thử đặt thẻ đầu vào của bạn bên ngoài phần tử trình kích hoạt, vì thẻ nhãn mô phỏng nhấp chuột, vì vậy bạn sẽ luôn có nhiều lần gọi.

Tôi gặp sự cố tương tự vì tôi đã lồng radio của mình vào bên trong nhãn như thế này với trình xử lý được gắn vào radio_div. Xóa nhãn lồng nhau đã khắc phục sự cố.

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

Nhãn sẽ kích hoạt radio / hộp kiểm được chọn.

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

Nó đặc biệt ngăn chặn nhãn để kích hoạt hành vi này.

Nhấp chuột vào nhãn có thuộc tính for = "some-id" sẽ kích hoạt nhấp chuột mới, nhưng chỉ khi mục tiêu tồn tại và là đầu vào. Tôi không thể giải quyết nó một cách hoàn hảo với e.preventDefault () hoặc những thứ tương tự nên tôi đã làm như thế này:

Ví dụ: nếu bạn có cấu trúc này và muốn một sự kiện khi nhấp vào .some-class

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

Những gì đã làm là:

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