Cara memicu klik pada tautan menggunakan jQuery

239

Saya punya tautan:

<ul id="titleee" class="gallery">
  <li>
    <a href="#inline" rel="prettyPhoto">Talent</a>
  </li>
</ul>

dan saya mencoba memicunya dengan menggunakan:

$(document).ready(function() {
  $('#titleee').find('a').trigger('click');
});

Tapi itu tidak berhasil.

Saya juga sudah mencoba: $('#titleee a').trigger('click');

Edit :

Saya sebenarnya perlu memicu apa pun yang dipanggil di sini <a href="#inline" rel="prettyPhoto">

jquery triggers click Patrioticcow
sumber
7
location.href($('#titleee').find('a').attr("href"));?
Sylvain
3
atau bahkan $ ('ul.gallery'). find ('li> a'). trigger ('click');
CarneyCode
114
Kawan Jawaban sebenarnya sangat sederhana. $('#titleee a')[0].click();. Dengan kata lain, gunakan metode klik DOM, bukan yang jQuery. Suara positif Graham Hotchkiss !
Roman Starkov
5
@romkyns tidak benar karena membuka pop up bukan tab baru. tetapi mengklik rentang tiruan di dalam tag 'a' ini memiliki tujuan
Shishir Arora
1
Jika Anda mencoba memicu suatu peristiwa di jangkar, maka kode yang Anda miliki akan berfungsi. $('ul#titleee li a[href="#inline"]').click();
Anand Pal

Jawaban:

309

Jika Anda mencoba untuk memicu suatu peristiwa pada jangkar, maka kode yang Anda miliki akan berfungsi. Saya membuat ulang contoh Anda di jsfiddle dengan eventHandler yang ditambahkan sehingga Anda dapat melihat bahwa itu berfungsi:

$(document).on("click", "a", function(){
    $(this).text("It works!");
});

$(document).ready(function(){
    $("a").trigger("click");
});

Apakah Anda mencoba menyebabkan pengguna menavigasi ke titik tertentu pada halaman web dengan mengklik jangkar, atau Anda mencoba memicu acara yang terikat padanya? Mungkin Anda belum benar-benar mengikat acara klik dengan sukses ke acara tersebut?

Ini juga:

$('#titleee').find('a').trigger('click');

setara dengan ini:

$('#titleee a').trigger('click');

Tidak perlu menelepon find. :)

Kit Sunde
sumber
16
@Kit .find () adalah pemilih yang lebih cepat daripada yang Anda usulkan, lakukan benchmark jika Anda tidak setuju tetapi proposal Anda memperlambatnya. positif :-)
Ady Ngom
14
@mashappslabs - Tidak apa-apa. Saya senang untuk Anda jika Anda merasa perlu melakukan optimasi prematur dan mikro, tidak peduli seberapa benar itu. :)
Kit Sunde
5
@Kit ... jadi ketika Anda membuat pernyataan seperti "tidak perlu memanggil find", itu tidak jatuh ke ranah optimasi prematur ?? Saya pikir itu terjadi tetapi kebetulan lebih lambat dari apa yang diusulkan pada awalnya. Saya tidak menanggapi demi argumen, tetapi untuk upaya bersama untuk menjadi lebih baik pada apa yang kita semua suka lakukan. Saya harap ini keluar benar :-)
Ady Ngom
5
@mashappslabs - Setelah melihat jsperf.com untuk pertama kalinya saya pikir saya akan kembali dan mengatakan Anda benar, metode Anda lebih cepat dalam kasus umum. Hanya Opera yang lebih lambat. jsperf.com/jquery-selector-perf-right-to-left/32
Kit Sunde
9
Anehnya, hal di atas tidak bekerja untuk saya, tetapi jawaban @GrahamHotchkiss tidak.
Oliver
210

Maaf, pengatur acara benar-benar tidak diperlukan. Apa yang Anda butuhkan adalah elemen lain dalam tag untuk diklik.

<a id="test1" href="javascript:alert('test1')">TEST1</a>
<a id="test2" href="javascript:alert('test2')"><span>TEST2</span></a>

Jquery:

$('#test1').trigger('click'); // Nothing
$('#test2').find('span').trigger('click'); // Works
$('#test2 span').trigger('click'); // Also Works

Ini semua tentang apa yang Anda klik dan bukan tag tetapi hal di dalamnya. Sayangnya, teks kosong sepertinya tidak dikenali oleh JQuery, tetapi itu dengan vanilla javascript:

document.getElementById('test1').click(); // Works!

Atau dengan mengakses objek jQuery sebagai array

$('#test1')[0].click(); // Works too!!!
Graham Hotchkiss
sumber
9
$ ('selector') [0] .click () sebenarnya akan menangani setidaknya satu kasus yang memicu event handler tidak akan: membuat browser mengenalinya sebagai klik aktual untuk memicu tautan protokol penanganan handler. Pemicu panggilan pada acara klik tidak akan menyebabkan aplikasi terkait diluncurkan. Terima kasih telah memasukkannya dalam jawaban Anda!
Greg Pettit
3
Yap, .click()justru itulah yang saya butuhkan!
notacouch
3
$ ('# span test2'). trigger ('klik'); membantu karena dapat membuka url di tab baru tetapi $ ('# test1') [0] .click (); sedang membuka insta pop up.
Shishir Arora
Ketika saya mencoba menangani klik pada elemen latar belakang: $ ('# titleee a'). Trigger ('click'); -> Tidak berfungsi! $ ('# titleee a') [0] .click (); -> Bekerja!
Agustus
1
$ ('# test1') [0] .click (); adalah penyelamat. Terima kasih banyak
Amit Bisht
18

Karena pertanyaan ini berada di peringkat # 1 di Google untuk "memicu klik pada <a>elemen" dan tidak ada jawaban yang menyebutkan bagaimana Anda melakukannya, ini adalah bagaimana Anda melakukannya:

$('#titleee a')[0].click();

Penjelasan: Anda memicu a clickpada elemen-html yang mendasarinya, bukan objek-jQuery .

Terima kasih googler :)

Alex
sumber
2
"Anda memicu klik pada elemen html yang mendasarinya, bukan objek-jQuery." - ini diklik untuk saya, terima kasih!
Frish
5

Dengan kode yang Anda berikan, Anda tidak dapat mengharapkan sesuatu terjadi. Saya kedua @mashappslabs: pertama menambahkan pengendali acara:

$("selector").click(function() {
    console.log("element was clicked"); // or alert("click");
});

kemudian picu acara Anda:

$("selector").click(); //or
$("selector").trigger("click");

dan Anda akan melihat pesan di konsol Anda.

Julz
sumber
5
Ini tidak berfungsi untuk saya: jika pemilih adalah "a" (tag HTML untuk tautan, hanya untuk menjadi jelas), fungsi anonim dipanggil ketika saya menelepon trigger, tetapi tindakan tag tidak terjadi. Sepertinya acara tidak merambat ke elemen DOM terkait. Jawaban oleh @GrahamHotchkiss adalah satu-satunya yang bisa diandalkan untuk saya.
Oliver
5

Jika Anda mencoba memicu suatu peristiwa di jangkar, maka kode yang Anda miliki akan berfungsi.

$(document).ready(function() {
  $('a#titleee').trigger('click');
});

ATAU

$(document).ready(function() {
  $('#titleee li a[href="#inline"]').click();
});

ATAU

$(document).ready(function() {
  $('ul#titleee li a[href="#inline"]').click();
});
Anand Pal
sumber
3

Anda harus mengatur event klik terlebih dahulu kemudian Anda dapat memicu dan melihat apa yang terjadi:

//good habits first let's cache our selector
var $myLink = $('#titleee').find('a');
$myLink.click(function (evt) {
  evt.preventDefault();
  alert($(this).attr('href'));
});

// now the manual trigger
$myLink.trigger('click');
Ady Ngom
sumber
3

Ini adalah demo cara memicu acara

<!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("input").select(function(){
            $("input").after(" Text marked!");
        });
        $("button").click(function(){
            $("input").trigger("select");
        });
    });
    </script>
    </head>
    <body>

    <input type="text" value="Hello World"><br><br>

    <button>Trigger the select event for the input field</button>

    </body>
    </html>
Harshad Hirapara
sumber
3

Untuk tautan ini harus berfungsi:

eval($(selector).attr('href'));
Amin
sumber
2

Ini tidak persis menjawab pertanyaan Anda, tetapi akan memberi Anda hasil yang sama dengan lebih sedikit sakit kepala.

Saya selalu memiliki metode panggilan peristiwa klik yang berisi semua logika yang ingin saya jalankan. Sehingga saya bisa langsung memanggil metode jika saya ingin melakukan tindakan tanpa klik yang sebenarnya.

Matthew Vines
sumber
2

Anda harus memanggil .click()metode asli elemen atau menggunakan createEventAPI.

Untuk info lebih lanjut, silakan kunjungi: https://learn.jquery.com/events/triggering-event-handlers/

George Filippakis
sumber
6
Selamat Datang di Stack Overflow! Meskipun ini mungkin merupakan petunjuk berharga untuk menyelesaikan masalah, jawaban yang baik juga menunjukkan solusinya. Harap edit untuk memberikan kode contoh untuk menunjukkan maksud Anda. Sebagai alternatif, pertimbangkan menulis ini sebagai komentar.
Toby Speight