click () event memanggil dua kali di jquery

Saya menyiapkan elemen tautan dan memanggil acara kliknya di jquery tetapi acara klik memanggil dua kali, silakan lihat di bawah kode jquery.

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

Mohon saran.

Terima kasih.

Pastikan dan periksa bahwa Anda tidak sengaja memasukkan skrip Anda dua kali di halaman HTML.

Lepaskan ikatan sebelum klik;

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

Itu berarti kode Anda menyertakan skrip jquery dua kali. Tapi coba ini:

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

//your code

});

Saya mencoba e.stopImmediatePropagation(),; Sepertinya ini berhasil untuk saya.

Dalam kasus saya, saya menggunakan skrip di bawah ini untuk mengatasi masalah tersebut

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

off()melepaskan semua acara yang mengikat #id. Jika Anda hanya ingin melepaskan clickacara, gunakan off('click').

Cukup panggil .off () tepat sebelum Anda memanggil .on ().

Ini akan menghapus semua penangan acara:

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

Untuk hanya menghapus pengendali acara 'klik' yang terdaftar:

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

Solusi yang agak umum untuk masalah dua klik adalah menempatkan

e.stopPropagation()

di akhir fungsi Anda (dengan asumsi Anda menggunakannya function(e)). Hal ini mencegah acara menggelembung yang dapat menyebabkan eksekusi fungsi kedua.

Saya memiliki masalah yang sama, tetapi Anda dapat mencoba mengubah kode ini

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

untuk ini:

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

Bagi saya, kode ini memecahkan masalah. Namun berhati-hatilah agar tidak menyertakan skrip Anda dua kali secara tidak sengaja di halaman HTML. Saya rasa jika Anda melakukan dua hal ini dengan benar, kode Anda akan berfungsi dengan benar. Terima kasih

silahkan coba ini

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

Ini jelas merupakan bug khususnya saat itu FireFox. Saya mencari banyak mencoba semua jawaban di atas dan akhirnya mendapatkannya sebagai bug oleh banyak ahli melalui SO. Jadi, saya akhirnya mendapatkan ide ini dengan mendeklarasikan variabel like

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

    }
});

Dengan cara ini pertama-tama memeriksa bukan fungsi yang dipanggil sebelumnya atau tidak.

Menambahkan e.preventDefault();di awal fungsi saya berhasil untuk saya.

Ini adalah pertanyaan lama, tetapi jika Anda menggunakan delegasi acara, inilah penyebabnya bagi saya.

Setelah menghapusnya .delegate-twoberhenti mengeksekusi dua kali. Saya yakin ini terjadi jika kedua delegasi hadir di halaman yang sama.

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

potongan kode ini tidak mengandung hal buruk. Itu adalah bagian lain dari skrip Anda seperti yang dikatakan @karim

Dalam kasus saya, itu berfungsi dengan baik di Chrome dan IE memanggil .click()dua kali. jika itu adalah masalah Anda, maka saya memperbaikinya dengan mengembalikan false, setelah memanggil .click()acara tersebut

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

Memanggil unbindmemecahkan masalah saya:

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

Saya tidak yakin mengapa tapi saya punya masalah dengan ini

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

Saat saya mengubahnya menjadi

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

Masalah terpecahkan. Tapi pasti ada yang salah dalam kode saya.

Saya tertipu oleh pilihan yang cocok dengan beberapa item sehingga masing-masing diklik. :firstmembantu:

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

Saya juga mengalami masalah ini di FF. Tag saya bagaimanapun terikat pada sebuah <a>tag. Meskipun <a>tag tidak ke mana-mana, itu masih melakukan klik dua kali. Saya menukar <a>tag dengan <span>tag dan masalah klik ganda menghilang.

Alternatif lain adalah menghapus atribut href sepenuhnya jika tautan tidak ke mana-mana.

Saya menghadapi masalah ini karena $(elem).click(function(){});skrip saya ditempatkan sebaris di div yang disetel kestyle="display:none;" .

Saat tampilan css dialihkan ke blokir, skrip akan menambahkan event listener untuk kedua kalinya. Saya memindahkan skrip ke file .js terpisah dan pendengar acara duplikat tidak lagi dimulai.

Ketika saya menggunakan metode ini pada halaman memuat dengan jquery, saya menulis $('#obj').off('click');sebelum mengatur fungsi klik, sehingga gelembung tidak terjadi. Bekerja untuk saya.

Jawaban sederhana saya adalah mengubah ikatan klik menjadi sebuah fungsi dan memanggilnya dari onclick elemen - berhasil! sedangkan di atas tidak ada yang melakukannya

Jika acara Anda menelepon dua atau tiga kali, atau lebih, ini mungkin membantu.

Jika Anda menggunakan sesuatu seperti ini untuk memicu peristiwa ...

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

… Lalu perhatikan jumlah .js-someclasselemen yang Anda miliki di halaman, karena ini akan memicu peristiwa klik untuk semua elemen - dan tidak hanya sekali!

Perbaikan sederhana selanjutnya adalah memastikan Anda memicu klik hanya sekali, dengan memilih hanya elemen pertama , misalnya:

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

Di tempat lain di skrip Anda, peristiwa "click" terikat lagi ke elemen yang sama, seperti yang disarankan oleh beberapa jawaban / komentar lain.

Saya memiliki masalah serupa dan untuk memverifikasi itu, saya cukup menambahkan console.logperintah ke skrip saya, seperti di cuplikan berikut:

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

Jika, setelah mengklik tombol, Anda mendapatkan sesuatu yang mirip dengan gambar di bawah ini dari konsol pengembang browser Anda (seperti yang saya lakukan), maka Anda tahu pasti bahwa click()acara tersebut telah terikat dua kali ke tombol yang sama.

Jika Anda memerlukan tambalan cepat, solusi yang diusulkan oleh komentator lain menggunakan offmetode (btw unbindtidak digunakan lagi sejak jQuery 3.0) untuk melepaskan acara sebelum (kembali) mengikatnya berfungsi dengan baik, dan saya merekomendasikannya juga:

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

Sayangnya, ini hanya patch sementara! Setelah masalah yang membuat bos Anda senang teratasi, Anda harus benar-benar menggali kode Anda lebih dalam dan memperbaiki masalah "pengikatan duplikat".

Solusi sebenarnya tentu saja bergantung pada kasus penggunaan spesifik Anda. Dalam kasus saya, misalnya, ada masalah "konteks". Fungsi saya dipanggil sebagai hasil dari panggilan Ajax yang diterapkan ke bagian tertentu dari dokumen: memuat ulang seluruh dokumen sebenarnya memuat ulang konteks "halaman" dan "elemen", yang mengakibatkan peristiwa tersebut terikat ke elemen dua kali .

Solusi saya untuk masalah ini adalah untuk memanfaatkan jQuery satu fungsi, yang sama di dengan pengecualian bahwa acara ini secara otomatis terikat setelah doa pertama. Itu ideal untuk kasus penggunaan saya, tetapi sekali lagi, ini mungkin bukan solusi untuk kasus penggunaan lain.

Punya masalah yang sama. Ini berhasil untuk saya -

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

Semoga ini bisa membantu seseorang.

Dalam kasus saya, HTML ditata seperti ini:

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

Dan jQuery saya seperti ini:

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

Itu membuatku bingung karena sepertinya tidak ada yang terjadi. Masalahnya adalah bahwa dalam .shares toggle akan membatalkan keluar luar .shares toggle.

Saya memecahkan masalah ini dengan mengubah jenis elemen. alih-alih tombol saya menempatkan input, dan masalah ini tidak terjadi lagi.

instesd dari:

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

ubah dengan:

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