如何使用jQuery触发链接点击

238

我有一个链接：

<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 
— 爱国牛
source
7
location.href($('#titleee').find('a').attr("href"));？
— 西尔万
3
甚至$（'ul.gallery'）。find（'li> a'）。trigger（'click'）;
— CarneyCode
114
伙计们 真正的答案是如此简单。$('#titleee a')[0].click();。换句话说，请使用DOM click方法，而不要使用jQuery click方法。支持Graham Hotchkiss！
— 罗曼·斯塔科夫
5
@romkyns没有不正确之处，因为它打开了一个弹出窗口，而不是新的选项卡。但点击此“ a”标签内的虚拟跨度即可达到目的
— Shishir Arora
1
如果您尝试在锚点上触发事件，那么您拥有的代码将起作用。$('ul#titleee li a[href="#inline"]').click();
— 阿南德·帕尔

Answers:

307

如果您试图在锚点上触发事件，那么您将使用的代码可以在jsfiddle中使用添加的eventHandler 重新创建示例，从而可以看到它的工作原理：

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

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

您是要通过单击锚点使用户导航到网页上的特定点，还是要触发与其绑定的事件？也许您实际上尚未将click事件成功绑定到该事件？

还有这个：

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

等效于：

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

无需致电查找。:)

— 杰德·桑德（Kit Sunde）
source
16
@Kit .find（）是一个比您提议的要快的选择器，如果不同意，请进行基准测试，但是您的提议会使它变慢。肯定地：-)
— Ady Ngom
14
@mashappslabs-没关系。如果您觉得有必要进行过早的和微观的优化，无论多么真实，我都会为您感到高兴。:)
— Kit Sunde
5
@Kit ...因此，当您进行诸如“无需调用find”之类的语句时，它不会落入过早优化的领域？我认为可以，但是它刚好比起初提出的要慢。我并不是为了争辩而回应，而是为了共同努力使我们所有人都喜欢做的事情变得更好。我希望这是对的:-)
— Ady Ngom
5
@mashappslabs-第一次见到jsperf.com时，我以为我会回来并说你是对的，在通常情况下，您的方法会更快。只有Opera较慢。jsperf.com/jquery-selector-perf-right-to-left/32
— Kit Sunde
9
奇怪的是，以上内容对我不起作用，但是@GrahamHotchkiss答案可以。
— 奥利弗2014年
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似乎无法识别裸文本，但是香草javascript可以识别裸文本：

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

或通过将jQuery对象作为数组访问

$('#test1')[0].click(); // Works too!!!
— 格雷厄姆·霍奇基斯（Graham Hotchkiss）
source
9
$（'selector'）[0] .click（）实际上将处理触发事件处理程序不会发生的至少一种情况：让浏览器将其识别为触发协议处理程序链接的实际点击。在click事件上调用触发器不会导致关联的应用程序启动。感谢您将其包含在您的答案中！
— Greg Pettit 2014年
3
是的，.click()正是我需要的！
— notacouch 2014年
3
$（'＃test2 span'）。trigger（'click'）; 帮助，因为它可以在新标签页中打开网址，但是$（'＃test1'）[0] .click（）; 正在打开一个弹出窗口。
— Shishir Arora 2015年
当我尝试处理背景元素时：$（'＃titleee a'）。trigger（'click'）; ->不起作用！$（'＃titleee a'）[0] .click（）; ->有效！
— 8
1
$（'＃test1'）[0] .click（）; 是救世主。非常感谢
— Amit Bisht
18

由于此问题在“触发对<a>元素的点击”方面在Google中排名第一，实际上没有答案提及您的操作方式，因此，您可以这样做：

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

说明：您click在基础html元素上触发，而不是jQuery-object触发。

不客气的Google员工:)

— 亚历克斯
source
2
“您触发了对底层html元素而非jQuery对象的点击。” -此点击我，谢谢！
— 弗里希
5

使用您提供的代码，您无法期望发生任何事情。我第二个@mashappslabs：首先添加一个事件处理程序：

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

然后触发您的事件：

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

并且您应该在控制台中看到该消息。

— 朱尔兹
source
5
这对我不起作用：如果选择器为“ a”（用于链接的HTML标记，请清除），则在我调用时将调用匿名函数trigger，但该标记的操作不会发生。就像事件不会传播到关联的DOM元素一样。@GrahamHotchkiss的答案是唯一对我可靠的方法。
— 奥利弗2014年
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();
});
— 阿南德·帕尔（Anand Pal）
source
3

好了，您必须先设置click事件，然后才能触发它并查看会发生什么：

//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）
source
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>
— 哈沙德·希拉帕拉
source
3

对于链接，这应该起作用：

eval($(selector).attr('href'));
— 阿敏
source
2

这并不能完全回答您的问题，但是可以减轻头痛的同时获得相同的结果。

我总是有单击事件调用方法，这些方法包含我要执行的所有逻辑。这样，如果我想执行操作而无需实际点击，就可以直接调用该方法。

— 马修·维尼斯（Matthew Vines）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.