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.

lickmycode
sumber
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/

Alex W
sumber
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);
Ashish Khurana
sumber
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();
    });
});
Filip Górny
sumber
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!
        }
    });
}
Reza Mamun
sumber
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");

})
Albert Català
sumber
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;
    }
});
Alexander O'Mara
sumber
2

Coba ini yang berfungsi untuk saya:

$('#bar').mousedown();
Henry
sumber
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.

Himanshu Saini
sumber
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();
});
Tisch
sumber
0

Gunakan ini saja:

$(function() {
 $('#watchButton').click();
});
Sanath LS
sumber
-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.

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