sự kiện click () đang gọi hai lần trong jquery

Tôi thiết lập một phần tử liên kết và gọi sự kiện nhấp chuột của nó trong jquery nhưng sự kiện nhấp chuột đang gọi hai lần, vui lòng xem mã bên dưới của jquery.

$("#link_button")
.button()
.click(function () {
   $("#attachmentForm").slideToggle("fast");
});

Xin hãy tư vấn.

Cảm ơn.

Đảm bảo và kiểm tra rằng bạn đã không vô tình đưa tập lệnh của mình hai lần vào trang HTML của mình.

Thực hiện hủy liên kết trước khi nhấp chuột;

$("#link_button").unbind('click');
$("#link_button")
.button()
.click(function () {
   $("#attachmentForm").slideToggle("fast");
});

Nó có nghĩa là mã của bạn đã bao gồm tập lệnh jquery hai lần. Nhưng hãy thử điều này:

$("#btn").unbind("click").click(function(){

//your code

});

Tôi đã cố gắng , e.stopImmediatePropagation(); Điều này dường như làm việc cho tôi.

Trong trường hợp của tôi, tôi đã sử dụng tập lệnh dưới đây để khắc phục sự cố

$('#id').off().on('click',function(){
    //...
});

off()hủy liên kết tất cả các sự kiện liên kết #id. Nếu bạn chỉ muốn hủy liên kết clicksự kiện, hãy sử dụng off('click').

Chỉ cần gọi .off () ngay trước khi bạn gọi .on ().

Thao tác này sẽ xóa tất cả các trình xử lý sự kiện:

$(element).off().on('click', function() {
// function body
});

Để chỉ xóa các trình xử lý sự kiện 'nhấp chuột' đã đăng ký:

$(element).off('click').on('click', function() {
// function body
});

Một giải pháp khá phổ biến cho vấn đề hai lần nhấp là đặt

e.stopPropagation()

ở cuối hàm của bạn (giả sử bạn sử dụng chức năng function(e)đó). Điều này ngăn sự kiện nổi lên có thể dẫn đến việc thực thi chức năng lần thứ hai.

Tôi gặp sự cố tương tự, nhưng bạn có thể thử thay đổi mã này

$("#link_button")
.button()
.click(function () {
   $("#attachmentForm").slideToggle("fast");
});

đến điều này:

$("#link_button").button();
$("#link_button").unbind("click").click(function () {
   $("#attachmentForm").slideToggle("fast");
});

Đối với tôi, mã này đã giải quyết được vấn đề. Nhưng hãy cẩn thận để không vô tình đưa tập lệnh của bạn hai lần vào trang HTML của bạn. Tôi nghĩ rằng nếu bạn làm đúng hai điều này, mã của bạn sẽ hoạt động chính xác. Cảm ơn

hãy thử cái này

$('#ddlSupervisor').live('change', function (e) {
    if (e.handled !== true) { //this makes event to fire only once
    getEmployeesbySupervisor();
    e.handled = true;
   }
});

Đây chắc chắn là một lỗi đặc biệt trong khi đó là FireFox. Tôi đã tìm kiếm rất nhiều và thử tất cả các câu trả lời ở trên và cuối cùng nhận được nó là lỗi bởi nhiều chuyên gia hơn SO. Vì vậy, cuối cùng tôi đã nảy ra ý tưởng này bằng cách khai báo biến như

var called = false;
$("#ColorPalete li").click(function() {
    if(!called)
    {
             called = true;
             setTimeout(function(){ //<-----This can be an ajax request but keep in mind to set called=false when you get response or when the function has successfully executed.
                 alert('I am called');
                 called = false;
             },3000);

    }
});

Theo cách này, trước tiên nó sẽ kiểm tra xem chức năng đã được gọi trước đó hay chưa.

Thêm e.preventDefault();vào đầu chức năng của tôi đã làm việc cho tôi.

Đây là một câu hỏi cũ hơn, nhưng nếu bạn đang sử dụng ủy quyền sự kiện thì đây là nguyên nhân gây ra cho tôi.

Sau khi loại bỏ .delegate-twonó đã ngừng thực thi hai lần. Tôi tin rằng điều này xảy ra nếu cả hai đại biểu có mặt trên cùng một trang.

$('.delegate-one, .delegate-two').on('click', '.button', function() {
    /* CODE */
});

đoạn mã này không có gì xấu. Đó là một phần khác trong tập lệnh của bạn như @karim đã nói

Trong trường hợp của tôi, nó hoạt động tốt trong Chrome và IE đang gọi .click()hai lần. nếu đó là vấn đề của bạn, thì tôi đã sửa nó bằng cách trả về false, sau khi gọi .click()sự kiện

   $("#txtChat").keypress(function(event) {
        if (event.which == 13) {
            $('#btnChat').click();
            $('#txtChat').val('');
            return false;
        }
    });

Gọi điện đã unbindgiải quyết được vấn đề của tôi:

$("#btn").unbind("click").click(function() {
    // your code
});

Tôi không chắc tại sao nhưng tôi đã gặp vấn đề này với

$(document).on("click", ".my-element", function (e) { });

Khi tôi thay đổi nó thành

$(".my-element").click(function () { });

Vấn đề đã được giải quyết. Nhưng chắc chắn có gì đó sai trong mã của tôi.

Tôi đã bị lừa bởi một lựa chọn khớp với nhiều mục nên mỗi mục đều được nhấp. :firstđã giúp:

$('.someClass[data-foo="'+notAlwaysUniqueID+'"]:first').click();

Tôi cũng gặp vấn đề này trên FF. Tuy nhiên, thẻ của tôi đã bị ràng buộc với một <a>thẻ. Mặc dù <a>thẻ không đi đến đâu nhưng nó vẫn nhấp đúp. Thay vào đó, tôi đã đổi <a>thẻ cho một <span>thẻ và vấn đề nhấp đúp đã biến mất.

Một cách khác là xóa hoàn toàn thuộc tính href nếu liên kết không đi đến đâu.

Tôi phải đối mặt với vấn đề này vì $(elem).click(function(){});tập lệnh của tôi được đặt trong dòng trong một div đã được đặt thành style="display:none;".

Khi màn hình css được chuyển sang chặn, tập lệnh sẽ thêm trình nghe sự kiện lần thứ hai. Tôi đã chuyển tập lệnh sang một tệp .js riêng biệt và trình xử lý sự kiện trùng lặp không còn được khởi tạo nữa.

Khi tôi sử dụng phương pháp này trên tải trang bằng jquery, tôi viết $('#obj').off('click');trước khi đặt chức năng nhấp chuột, vì vậy bong bóng không xảy ra. Làm việc cho tôi.

Câu trả lời đơn giản của tôi là biến liên kết nhấp chuột thành một hàm và gọi hàm đó từ thao tác nhấp chuột của phần tử - đã thành công! trong khi không có cái nào ở trên làm được

Nếu sự kiện của bạn gọi hai lần hoặc ba lần hoặc nhiều hơn, điều này có thể hữu ích.

Nếu bạn đang sử dụng thứ gì đó như thế này để kích hoạt các sự kiện…

$('.js-someclass').click();

… Thì hãy chú ý đến số lượng .js-someclass phần tử bạn có trên trang, vì nó sẽ kích hoạt sự kiện nhấp chuột cho tất cả các phần tử - và không chỉ một lần!

Cách khắc phục đơn giản sau đó là đảm bảo bạn chỉ kích hoạt nhấp chuột một lần, bằng cách chỉ chọn phần tử đầu tiên , ví dụ:

$('.js-someclass:first').click();

Chắc chắn rằng ở một nơi khác trong (các) tập lệnh của bạn, sự kiện "nhấp chuột" đang được liên kết lại với cùng một phần tử, như một số câu trả lời / nhận xét khác đang đề xuất.

Tôi đã gặp sự cố tương tự và để xác minh điều đó, tôi chỉ cần thêm một console.loglệnh vào tập lệnh của mình, như trong đoạn mã sau:

$("#link_button")
    .button()
    .click(function () {
        console.log("DEBUG: sliding toggle...");
        $("#attachmentForm").slideToggle("fast");
    });

Nếu, khi nhấp vào nút, bạn nhận được thứ gì đó tương tự như hình ảnh bên dưới từ bảng điều khiển dành cho nhà phát triển của trình duyệt (như tôi đã làm), thì bạn biết chắc rằng click()sự kiện đã được liên kết hai lần với cùng một nút.

Nếu bạn cần một bản vá nhanh chóng, giải pháp được đề xuất bởi các nhà bình luận khác là sử dụng offphương pháp (btw unbindkhông được dùng nữa kể từ jQuery 3.0) để hủy liên kết sự kiện trước khi (lại) ràng buộc nó hoạt động tốt và tôi cũng khuyên bạn nên thực hiện:

$("#link_button")
    .button()
    .off("click")
    .click(function () {
        $("#attachmentForm").slideToggle("fast");
    });

Thật không may, đây chỉ là một bản vá tạm thời! Một khi vấn đề khiến bạn hài lòng với sếp đã được giải quyết, bạn thực sự nên đào sâu vào mã của mình hơn một chút và khắc phục vấn đề "ràng buộc trùng lặp".

Giải pháp thực tế tất nhiên phụ thuộc vào trường hợp sử dụng cụ thể của bạn. Trong trường hợp của tôi, chẳng hạn, có một vấn đề về "ngữ cảnh". Hàm của tôi đang được gọi là kết quả của lệnh gọi Ajax được áp dụng cho một phần cụ thể của tài liệu: tải lại toàn bộ tài liệu thực sự là tải lại cả ngữ cảnh "trang" và "phần tử", dẫn đến sự kiện được liên kết với phần tử hai lần .

Giải pháp của tôi cho vấn đề này là sử dụng một hàm jQuery , tương tự như trên ngoại trừ sự kiện được tự động bỏ ràng buộc sau lần gọi đầu tiên của nó. Đó là lý tưởng cho trường hợp sử dụng của tôi nhưng một lần nữa, nó có thể không phải là giải pháp cho các trường hợp sử dụng khác.

Có cùng một vấn đề. Điều này đã làm việc cho tôi -

$('selector').once().click(function() {});

Hy vọng điều này sẽ giúp ai đó.

Trong trường hợp của tôi, HTML được trình bày như sau:

<div class="share">
  <div class="wrapper">
    <div class="share">
    </div>
  </div>
</div>

Và jQuery của tôi như thế này:

jQuery('.share').toggle();

Nó làm tôi bối rối vì dường như không có gì xảy ra. Vấn đề là các bên trong .shares toggle sẽ hủy bỏ ra ngoài .shares toggle.

Tôi đã giải quyết vấn đề này bằng cách thay đổi loại phần tử. thay vì nút, tôi đặt đầu vào và sự cố này không xảy ra nữa.

ví dụ của:

<button onclick="doSomthing()">click me</button>

thay thế bằng:

<input onclick="doSomthing()" value="click me">