วิธีการคลิกลิงก์ที่ใช้ jQuery

239

ฉันมีลิงค์:

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

และฉันพยายามที่จะเรียกมันโดยใช้:

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

แต่มันไม่ทำงาน

ฉันยังลอง: $('#titleee a').trigger('click');

แก้ไข :

ที่จริงฉันต้องเรียกสิ่งที่เรียกว่าที่นี่ <a href="#inline" rel="prettyPhoto">

jquery triggers click

— Patrioticcow
แหล่งที่มา

7

location.href($('#titleee').find('a').attr("href"));?

— Sylvain

3

หรือแม้แต่ $ ('ul.gallery'). find ('li> a'). trigger ('คลิก');

— CarneyCode

114

ผู้ชาย คำตอบที่แท้จริงนั้นง่ายมาก $('#titleee a')[0].click();. กล่าวอีกนัยหนึ่งให้ใช้วิธีการคลิก DOM ไม่ใช่ jQuery โหวตขึ้นโหวตลงGraham Hotchkiss !

— Roman Starkov

5

@romkyns ไม่ถูกต้องเนื่องจากเปิดป็อปอัพแทนแท็บใหม่ แต่การคลิกที่หุ่นจำลองภายในแท็ก 'a' นี้มีจุดประสงค์

— Shishir Arora

1

หากคุณพยายามที่จะทริกเกอร์เหตุการณ์ที่จุดยึดรหัสที่คุณมีจะใช้งานได้ $('ul#titleee li a[href="#inline"]').click();

— Anand Pal

308

หากคุณพยายามที่จะทริกเกอร์เหตุการณ์ที่จุดยึดแล้วรหัสที่คุณจะทำงานฉันจะสร้างตัวอย่างของคุณใหม่ในjsfiddleด้วย eventHandler ที่เพิ่มเข้ามาเพื่อให้คุณเห็นว่ามันใช้งานได้:

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

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

คุณกำลังพยายามทำให้ผู้ใช้นำทางไปยังจุดหนึ่งบนหน้าเว็บโดยคลิกที่จุดยึดหรือคุณพยายามที่จะทริกเกอร์เหตุการณ์ที่ถูกผูกไว้กับมัน? บางทีคุณอาจไม่ได้ผูกกิจกรรมการคลิกสำเร็จกับกิจกรรมจริง

นอกจากนี้:

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

เท่ากับสิ่งนี้:

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

ไม่จำเป็นต้องโทรหา :)

— Kit Sunde
แหล่งที่มา

16

@Kit .find () เป็นตัวเลือกที่เร็วกว่าสิ่งที่คุณกำลังเสนอให้ทำเกณฑ์มาตรฐานหากคุณไม่เห็นด้วย แต่ข้อเสนอของคุณช้าลง ในเชิงบวก :-)

— Ady Ngom

14

@mashappslabs - ไม่เป็นไร ฉันมีความสุขสำหรับคุณถ้าคุณรู้สึกว่าจำเป็นต้องทำการปรับให้เหมาะสมก่อนเวลาและเล็ก ๆ ไม่ว่าจะจริงแค่ไหนก็ตาม :)

— Kit Sunde

5

@Kit ... ดังนั้นเมื่อคุณสร้างคำสั่งเช่น "ไม่จำเป็นต้องโทรหา" มันไม่ได้ตกอยู่ในขอบเขตของการเพิ่มประสิทธิภาพก่อนวัยอันควร ?? ฉันคิดว่ามันทำได้ แต่มันช้ากว่าที่เสนอไว้ตอนแรก ฉันไม่ตอบสนองเพื่อการโต้แย้ง แต่เพื่อความพยายามร่วมกันเพื่อให้ดีขึ้นในสิ่งที่เราทุกคนรักทำ ฉันหวังว่านี่จะออกมาถูกต้อง :-)

— Ady Ngom

5

@mashappslabs - เห็น jsperf.com เป็นครั้งแรกที่ฉันคิดว่าฉันจะกลับมาและบอกว่าคุณพูดถูกวิธีของคุณเร็วขึ้นในกรณีทั่วไป Opera เท่านั้นจะช้าลง jsperf.com/jquery-selector-perf-right-to-left/32

— Kit Sunde

9

ผิดปกติข้างต้นไม่ได้ผลสำหรับฉัน แต่คำตอบ @GrahamHotchkiss

— โอลิเวอร์

210

ขออภัยไม่จำเป็นต้องใช้ตัวจัดการเหตุการณ์ สิ่งที่คุณต้องมีก็คือองค์ประกอบอื่นภายในแท็กให้คลิก

<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

นี่คือทั้งหมดที่เกี่ยวกับสิ่งที่คุณคลิกและไม่ใช่แท็ก แต่เป็นสิ่งที่อยู่ภายใน น่าเสียดายที่ข้อความที่เปลือยเปล่าดูเหมือนจะไม่ได้รับการยอมรับจาก JQuery แต่เป็นโดย vanilla javascript:

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

หรือโดยการเข้าถึงวัตถุ jQuery เป็นอาร์เรย์

$('#test1')[0].click(); // Works too!!!

— Graham Hotchkiss
แหล่งที่มา

9

$ ('selector') [0] .click () จริง ๆ แล้วจะจัดการอย่างน้อยหนึ่งกรณีที่ทริกเกอร์ตัวจัดการเหตุการณ์จะไม่: ให้เบราว์เซอร์รับรู้ว่าเป็นการคลิกจริงสำหรับเรียกลิงก์ตัวจัดการโปรโตคอล ทริกเกอร์การโทรในเหตุการณ์คลิกจะไม่ทำให้แอปพลิเคชันที่เกี่ยวข้องเปิดขึ้น ขอบคุณที่รวมไว้ในคำตอบของคุณ!

— Greg Pettit

3

ใช่.click()เป็นสิ่งที่ฉันต้องการ!

— notacouch

3

$ ('# test2 span'). trigger ('คลิก'); ช่วยได้เพราะสามารถเปิด URL ในแท็บใหม่ แต่ $ ('# test1') [0] .click (); กำลังเปิดป๊อปอัปขึ้นมา

— Shishir Arora

เมื่อฉันพยายามจัดการคลิกที่องค์ประกอบพื้นหลัง: $ ('# titleee a'). trigger ('click'); -> ไม่ทำงาน! $ ('# titleee a') [0] .click (); -> ใช้งานได้!

— 18augst

1

$ ( '# test1') [0] จำนวนคลิก (); เป็นผู้กอบกู้ ขอบคุณมาก

— Amit Bisht

18

เนื่องจากคำถามนี้อยู่ในอันดับ # 1 ใน Google สำหรับ "เรียกใช้การคลิกที่<a>องค์ประกอบ" และไม่มีคำตอบที่กล่าวถึงวิธีการทำเช่นนี้นี่คือวิธีที่คุณทำ:

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

คำอธิบาย: คุณเรียกclickบนพื้นฐาน HTML องค์ประกอบไม่ jQuery

ยินดีต้อนรับชาว Google :)

— อเล็กซ์
แหล่งที่มา

2

"คุณเปิดใช้งานการคลิกที่องค์ประกอบ HTML พื้นฐานไม่ใช่ jQuery-object" - สิ่งนี้คลิกเพื่อฉันขอบคุณ!

— Frish

5

ด้วยรหัสที่คุณระบุคุณไม่สามารถคาดหวังอะไรได้เลย ฉันสอง @mashappslabs: เพิ่มตัวจัดการเหตุการณ์ก่อน:

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

จากนั้นเรียกใช้กิจกรรมของคุณ:

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

และคุณควรเห็นข้อความในคอนโซลของคุณ

— Julz
แหล่งที่มา

5

สิ่งนี้ไม่ได้ผลสำหรับฉัน: หากตัวเลือกคือ "a" (แท็ก HTML สำหรับลิงก์เพื่อให้ชัดเจน) ฟังก์ชันที่ไม่ระบุชื่อจะถูกเรียกเมื่อฉันโทรtriggerแต่การกระทำของแท็กจะไม่เกิดขึ้น มันเหมือนกับว่าเหตุการณ์ไม่ได้เผยแพร่ไปยังองค์ประกอบ DOM ที่เกี่ยวข้อง คำตอบโดย @GrahamHotchkiss เป็นคนเดียวที่ทำงานได้อย่างน่าเชื่อถือสำหรับฉัน

— โอลิเวอร์

5

หากคุณพยายามที่จะทริกเกอร์เหตุการณ์ที่จุดยึดรหัสที่คุณมีจะใช้งานได้

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

หรือ

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

หรือ

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

— อานันท์เพื่อน
แหล่งที่มา

3

คุณต้องตั้งค่าเหตุการณ์คลิกก่อนจากนั้นคุณสามารถทริกเกอร์และดูว่าเกิดอะไรขึ้น:

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

— เลดี้งอม
แหล่งที่มา

3

นี่คือตัวอย่างวิธีการทริกเกอร์เหตุการณ์

<!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
แหล่งที่มา

3

สำหรับลิงก์นี้ควรใช้งานได้:

eval($(selector).attr('href'));

— อามิน
แหล่งที่มา

2

สิ่งนี้ไม่ได้ตอบคำถามของคุณอย่างแน่นอน แต่จะได้ผลลัพธ์เดียวกันโดยมีอาการปวดหัวน้อยลง

ฉันมีวิธีการโทรคลิกกิจกรรมที่มีตรรกะทั้งหมดที่ฉันต้องการเรียกใช้เสมอ เพื่อให้ฉันสามารถเรียกวิธีการโดยตรงถ้าฉันต้องการที่จะดำเนินการโดยไม่ต้องคลิกจริง

— Matthew Vines
แหล่งที่มา

2

คุณควรเรียก.click()วิธีการดั้งเดิมขององค์ประกอบหรือใช้createEventAPI

สำหรับข้อมูลเพิ่มเติมกรุณาเยี่ยมชม: https://learn.jquery.com/events/triggering-event-handlers/

— George Filippakis
แหล่งที่มา

6

ยินดีต้อนรับสู่ Stack Overflow! แม้ว่านี่อาจเป็นคำแนะนำที่มีค่าในการแก้ปัญหา แต่คำตอบที่ดีก็แสดงให้เห็นถึงวิธีการแก้ไข โปรดแก้ไขเพื่อให้รหัสตัวอย่างเพื่อแสดงความหมายของคุณ หรือลองเขียนสิ่งนี้เป็นความคิดเห็นแทน

— Toby Speight