Cara mendapatkan JQuery.trigger ('klik'); untuk memulai klik mouse


145

Saya mengalami kesulitan memahami cara mensimulasikan klik mouse menggunakan JQuery. Dapatkah seseorang tolong beri tahu saya apa yang saya lakukan salah.

HTML:

<a id="bar" href="http://stackoverflow.com" target="_blank">Don't click me!</a>
<span id="foo">Click me!</span>

jQuery:

jQuery('#foo').on('click', function(){
    jQuery('#bar').trigger('click');
});

Demo: FIDDLE

ketika saya mengklik tombol #foo saya ingin mensimulasikan klik pada #bar namun ketika saya mencoba ini, tidak ada yang terjadi. Saya juga mencoba jQuery(document).ready(function(){...})tetapi tidak berhasil.


2
jQuery triggerhanya berfungsi jika acara 'jQuery click` ditambahkan. Kalau tidak, Anda tidak akan dapat melakukan apa pun dengan cara ini;
— Reza Mamun

3
Ini adalah langkah pengamanan yang dibangun ke dalam browser. Lihat jawaban @ Blazemonger: stackoverflow.com/questions/7999806/…
— sanchez

1
@ san.chez Menarik, terima kasih atas informasinya, tidak tahu tentang tindakan pengamanan ini sebelumnya!
— Lickmycode

Jawaban:


277

Anda perlu menggunakan jQuery('#bar')[0].click(); untuk mensimulasikan klik mouse pada elemen DOM yang sebenarnya (bukan objek jQuery), alih-alih menggunakan .trigger()metode jQuery.

Catatan: DOM Level 2 .click()tidak berfungsi pada beberapa elemen di Safari . Anda harus menggunakan solusi.

http://api.jquery.com/click/


18
Anda menghemat hari saya $ ('# asd') [0] .click ();
— waza123

Gunakan ini untuk mengklik tab berikutnya pada bidang ACF jQuery: $ ('. Next') .klik (function () {$ ('# primary li.active'). Next (). Find ('. Acf-tab-button ') [0] .click ();});
— Tisch

1
Terima kasih. Ini bekerja di desktop. Tetapi di ponsel (chrome android) tidak. ada saran?
— kk-dev11

Untuk beberapa alasan ini menghancurkan hash di URL saat ini.
— luis

1
jika salah satu hrefs pada tag <adalah '#', itu akan melakukannya. <a biasanya dialihkan ke URL yang berbeda. Anda harus menghentikannya dengan ev.preventDefault () dan ev.stopPropagation () sebelum pengendali klik Anda kembali. ATAU, gunakan beberapa tag lain selain <a; Anda dapat melampirkan penangan klik ke apa pun yang terlihat.
— OsamaBinLogin

43

Anda hanya perlu membuat acara timeout kecil sebelum melakukan .click() seperti ini:

setTimeout(function(){ $('#btn').click()}, 100);

Berfungsi sempurna jika Anda mencoba mensimulasikan klik saat halaman dimuat.
— Gabriel Dzul

33

Ini adalah perilaku JQuery. Saya tidak yakin mengapa ini bekerja seperti ini, itu hanya memicu fungsi onClick pada tautan.

Mencoba:

jQuery(document).ready(function() {
    jQuery('#foo').on('click', function() {
        jQuery('#bar')[0].click();
    });
});

Terima kasih atas penjelasannya. Perilaku jQuery yang sangat menjengkelkan, tetapi kode Anda berfungsi.
— Lickmycode

Sama sekali tidak menyebalkan. trigger()dimaksudkan untuk menjalankan bagian JavaScript peristiwa klik . Ini sangat mirip dengan membuat function var() {}thats digunakan kembali beberapa kali.

21

Lihat demo saya: http://jsfiddle.net/8AVau/1/

jQuery(document).ready(function(){
    jQuery('#foo').on('click', function(){
         jQuery('#bar').simulateClick('click');
    });
});

jQuery.fn.simulateClick = function() {
    return this.each(function() {
        if('createEvent' in document) {
            var doc = this.ownerDocument,
                evt = doc.createEvent('MouseEvents');
            evt.initMouseEvent('click', true, true, doc.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
            this.dispatchEvent(evt);
        } else {
            this.click(); // IE Boss!
        }
    });
}

Saya akan membungkusnya this.click();dalamelse if(this.click)
— Alex W

15

Semoga bermanfaat:

Kode yang memanggil Pemicu harus pergi setelah acara dipanggil.

Sebagai contoh, saya memiliki beberapa kode yang ingin saya jalankan ketika nilai #expense_tickets diubah, dan juga, ketika halaman dimuat ulang

$(function() { 

  $("#expense_tickets").change(function() {
    // code that I want to be executed when #expense_tickets value is changed, and also, when page is reload
  });

  // now we trigger the change event
  $("#expense_tickets").trigger("change");

})

4
Ahhh itu juga masalahku! Bingung mengapa hal trigger()itu tidak berhasil. Ternyata saya memiliki kode pemicu yang diatur DI ATAS fungsi yang dipanggilnya - jadi pengaitnya tidak benar-benar ada. Doh!
— Andrew Newby

5

jQuery's .trigger('click');hanya akan menyebabkan suatu acara untuk memicu pada acara ini, itu tidak akan memicu aksi browser default juga.

Anda dapat mensimulasikan fungsi yang sama dengan JavaScript berikut:

jQuery('#foo').on('click', function(){
    var bar = jQuery('#bar');
    var href = bar.attr('href');
    if(bar.attr("target") === "_blank")
    {
        window.open(href);
    }else{
        window.location = href;
    }
});

2

Coba ini yang berfungsi untuk saya:

$('#bar').mousedown();

0

Saya telah mencoba dua jawaban teratas, itu tidak berfungsi untuk saya sampai saya menghapus "display: none" dari elemen input file saya. Kemudian saya kembali ke .trigger () juga berfungsi di safari for windows.

Jadi kesimpulannya, Jangan gunakan tampilan: tidak ada; untuk menyembunyikan input file Anda, Anda dapat menggunakan opacity: 0 sebagai gantinya.


0

Secara teknis bukan jawaban untuk ini, tetapi penggunaan yang baik dari jawaban yang diterima ( https://stackoverflow.com/a/20928975/82028 ) untuk membuat tombol next dan prev untuk tab pada bidang jQuery ACF:

$('.next').click(function () {
    $('#primary li.active').next().find('.acf-tab-button')[0].click();
});

$('.prev').click(function () {
    $('#primary li.active').prev().find('.acf-tab-button')[0].click();
});

0

Gunakan ini saja:

$(function() {
 $('#watchButton').click();
});

-3

Anda tidak dapat mensimulasikan acara klik dengan javascript. .trigger()Fungsi jQuery hanya menjalankan peristiwa bernama "klik" pada elemen, yang dapat Anda tangkap dengan .on()metode jQuery.


9
"Anda tidak dapat mensimulasikan acara klik dengan javascript" - Ya, Anda bisa .
— nnnnnn

Salah ... Anda dapat mensimulasikan acara klik dengan javascript / jquery dan Anda dapat menangkap acara klik pemicu dengan .click tanpa di.
— Aerious
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.