Cách kích hoạt nhấp chuột vào liên kết bằng jQuery

238

Tôi có một liên kết:

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

và tôi đang cố gắng kích hoạt nó bằng cách sử dụng:

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

Nhưng nó không hoạt động.

Tôi cũng đã thử: $('#titleee a').trigger('click');

Chỉnh sửa :

Tôi thực sự cần phải kích hoạt bất cứ thứ gì được gọi ở đây <a href="#inline" rel="prettyPhoto">

jquery triggers click

— Yêu nước
nguồn

7

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

— Sylvain

3

hoặc thậm chí $ ('ul.gallery'). find ('li> a'). trigger ('click');

— CarneyCode

114

Các cậu. Câu trả lời thực sự rất đơn giản. $('#titleee a')[0].click();. Nói cách khác, sử dụng phương thức nhấp chuột DOM, không phải phương thức jQuery. Upvote Graham Hotchkiss !

— Roman Starkov

5

@romkyns không đúng vì nó mở một cửa sổ bật lên thay vì tab mới. nhưng nhấp vào một hình nộm bên trong thẻ 'a' này phục vụ mục đích

— Shishir Arora

1

Nếu bạn đang cố gắng kích hoạt một sự kiện trên neo, thì mã bạn có sẽ hoạt động. $('ul#titleee li a[href="#inline"]').click();

— Anand Pal

306

Nếu bạn đang cố gắng kích hoạt một sự kiện trên neo, thì mã bạn có sẽ hoạt động tôi đã tạo lại ví dụ của bạn trong jsfiddle với một eventHandler được thêm vào để bạn có thể thấy rằng nó hoạt động:

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

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

Bạn đang cố gắng khiến người dùng điều hướng đến một điểm nhất định trên trang web bằng cách nhấp vào neo hoặc bạn đang cố gắng kích hoạt các sự kiện bị ràng buộc với nó? Có lẽ bạn chưa thực sự ràng buộc sự kiện nhấp chuột thành công vào sự kiện?

Ngoài ra này:

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

là tương đương với điều này:

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

Không cần gọi tìm. :)

— Bộ Sunde
nguồn

16

@Kit .find () là một công cụ chọn nhanh hơn so với những gì bạn đang đề xuất, hãy làm một điểm chuẩn nếu bạn không đồng ý nhưng đề xuất của bạn làm chậm nó. tích cực :-)

— Ady Ngom

14

@mashappslabs - Không sao đâu. Tôi mừng cho bạn nếu bạn cảm thấy cần phải tối ưu hóa sớm và vi mô, bất kể nó có đúng như thế nào. :)

— Kit Sunde

5

@Kit ... vì vậy khi bạn thực hiện một tuyên bố như "không cần gọi tìm", nó không rơi vào địa hạt tối ưu hóa sớm ?? Tôi nghĩ rằng nó làm nhưng nó chỉ xảy ra chậm hơn so với những gì được đề xuất lúc đầu. Tôi không trả lời vì lý do tranh luận, nhưng vì một nỗ lực phối hợp để cải thiện những gì chúng ta đều thích làm. Tôi hy vọng điều này xuất hiện đúng :-)

— Ady Ngom

5

@mashappslabs - Lần đầu tiên nhìn thấy jsperf.com tôi nghĩ tôi đã quay lại và nói rằng bạn đúng, phương pháp của bạn nhanh hơn trong trường hợp chung. Chỉ có Opera là chậm hơn. jsperf.com/jquery-selector-perf-right-to-left/32

— Kit Sunde

9

Điều kỳ lạ là những điều trên không phù hợp với tôi, nhưng câu trả lời @GrahamHotchkiss thì có.

— Oliver

210

Xin lỗi, nhưng xử lý sự kiện là thực sự không cần thiết. Những gì bạn cần là một yếu tố khác trong thẻ để nhấp vào.

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

Câu hỏi:

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

Đây là tất cả về những gì bạn đang nhấp và nó không phải là thẻ mà là thứ bên trong nó. Thật không may, văn bản trần dường như không được JQuery nhận ra, nhưng đó là bởi javilla javascript:

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

Hoặc bằng cách truy cập đối tượng jQuery dưới dạng một mảng

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

— Graham Hotchkiss
nguồn

9

$ ('selector') [0] .click () sẽ thực sự xử lý ít nhất một trường hợp kích hoạt trình xử lý sự kiện sẽ không: để trình duyệt nhận ra đó là một nhấp chuột thực tế để kích hoạt liên kết xử lý giao thức. Gọi kích hoạt trên sự kiện nhấp chuột sẽ không khiến ứng dụng liên quan khởi chạy. Cảm ơn đã bao gồm nó trong câu trả lời của bạn!

— Greg Pettit

3

Đúng, .click()chính xác là những gì tôi cần!

— notacouch

3

$ ('# test2 span'). kích hoạt ('nhấp'); đã giúp vì nó có thể mở một url trong tab mới nhưng $ ('# test1') [0] .click (); đã mở ra một instea.

— Shishir Arora

Khi tôi cố gắng xử lý nhấp vào phần tử nền: $ ('# titleee a'). Trigger ('click'); -> Không hoạt động! $ ('# titleee a') [0] .click (); -> Hoạt động!

— 18 khánh thành

1

$ ('# test1') [0] .click (); là một vị cứu tinh Cảm ơn rất nhiều

— Amit Bisht

18

Vì câu hỏi này được xếp hạng số 1 trong Google về "kích hoạt nhấp chuột vào một <a>yếu tố" và không có câu trả lời nào thực sự đề cập đến cách bạn làm điều đó, đây là cách bạn thực hiện:

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

Giải thích: bạn kích hoạt clickphần tử html bên dưới, không phải đối tượng jQuery .

Bạn được chào đón nhân viên :)

— Alex
nguồn

2

"bạn kích hoạt một nhấp chuột vào phần tử html cơ bản, không phải đối tượng jQuery." - cái này đã nhấp cho tôi, cảm ơn bạn!

— Frish

5

Với mã bạn cung cấp, bạn không thể mong đợi bất cứ điều gì xảy ra. Tôi thứ hai @mashappslabs: đầu tiên thêm một trình xử lý sự kiện:

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

sau đó kích hoạt sự kiện của bạn:

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

và bạn sẽ thấy thông báo trong bảng điều khiển của bạn.

— Julz
nguồn

5

Điều này không phù hợp với tôi: nếu bộ chọn là "a" (thẻ HTML cho các liên kết, chỉ cần rõ ràng), chức năng ẩn danh sẽ được gọi khi tôi gọi trigger, nhưng hành động của thẻ không xảy ra. Nó giống như sự kiện không truyền đến phần tử DOM được liên kết. Câu trả lời của @GrahamHotchkiss là người duy nhất làm việc đáng tin cậy đối với tôi.

— Oliver

5

Nếu bạn đang cố gắng kích hoạt một sự kiện trên neo, thì mã bạn có sẽ hoạt động.

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

HOẶC LÀ

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

HOẶC LÀ

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

— Anand Pal
nguồn

3

Vâng, bạn phải thiết lập sự kiện nhấp trước tiên sau đó bạn có thể kích hoạt nó và xem điều gì xảy ra:

//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
nguồn

3

Đây là bản demo làm thế nào để kích hoạt sự kiện

<!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
nguồn

3

Đối với các liên kết này nên hoạt động:

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

— Amin
nguồn

2

Điều này không trả lời chính xác câu hỏi của bạn, nhưng sẽ giúp bạn có được kết quả tương tự với ít đau đầu hơn.

Tôi luôn có các phương thức nhấp chuột gọi các phương thức có chứa tất cả logic tôi muốn thực thi. Vì vậy, tôi chỉ có thể gọi phương thức trực tiếp nếu tôi muốn thực hiện hành động mà không cần nhấp chuột thực tế.

— Matthew Vines
nguồn

2

Bạn nên gọi .click()phương thức gốc của phần tử hoặc sử dụng createEventAPI.

Để biết thêm thông tin, vui lòng truy cập: https://learn.jquery.com/events/triggering-event-handlers/

— George Filippakis
nguồn

6

Chào mừng bạn đến với Stack Overflow! Trong khi điều này có thể là một gợi ý có giá trị để giải quyết vấn đề, một câu trả lời tốt cũng cho thấy giải pháp. Vui lòng chỉnh sửa để cung cấp mã ví dụ để hiển thị những gì bạn có ý nghĩa. Thay vào đó, hãy xem xét viết này như là một bình luận thay thế.

— Toby Speight