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.