如何使用jQuery触发点击链接答案

【问题标题】：How to trigger a click on a link using jQuery如何使用jQuery触发点击链接
【发布时间】：2011-08-14 05:52:10
【问题描述】：

我有一个链接：

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

编辑：

我实际上需要触发这里调用的任何 get <a href="#inline" rel="prettyPhoto">

【问题讨论】：

location.href($('#titleee').find('a').attr("href")); ?
甚至 $('ul.gallery').find('li>a').trigger('click');
伙计们。真正的答案是如此简单。 $('#titleee a')[0].click();。换句话说，使用 DOM click 方法，而不是 jQuery。点赞Graham Hotchkiss！
@romkyns 不正确，因为它打开一个弹出窗口而不是新标签。但是单击此“a”标签内的虚拟跨度可以达到目的
如果你试图在锚点上触发一个事件，那么你的代码将起作用。$('ul#titleee li a[href="#inline"]').click();

标签： jquery triggers click

【解决方案1】：

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

我的点击事件调用方法总是包含我想要执行的所有逻辑。这样，如果我想在不实际点击的情况下执行操作，就可以直接调用该方法。

【讨论】：

【解决方案2】：

如果您尝试在锚点上触发事件，那么您拥有的代码将起作用

$(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');

无需调用 find。 :)

【讨论】：

@Kit .find() 是一个比您建议的选择器更快的选择器，如果您不同意但您的建议会减慢速度，请进行基准测试。积极:-)
@mashappslabs - 没关系。如果您觉得有必要进行过早和微优化，无论它多么真实，我都会为您感到高兴。 :)
@Kit...所以当你在做“不需要调用find”这样的声明时，它不属于过早优化的领域吗？？我认为确实如此，但它恰好比最初提出的要慢。我不是为了争论而做出回应，而是为了共同努力，在我们都喜欢做的事情上做得更好。我希望这是正确的:-)
@mashappslabs - 第一次看到 jsperf.com，我想我会回来说你是对的，你的方法在一般情况下更快。只有 Opera 比较慢。 jsperf.com/jquery-selector-perf-right-to-left/32
奇怪的是，以上方法对我不起作用，但@GrahamHotchkiss 的回答可以。

【解决方案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');

【讨论】：

【解决方案4】：

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

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

然后触发你的事件：

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

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

【讨论】：

这对我不起作用：如果选择器是“a”（链接的 HTML 标记，为了清楚起见），当我调用 trigger 时会调用匿名函数，但标记的操作会不会发生。就像事件不会传播到关联的 DOM 元素一样。 @GrahamHotchkiss 的答案是唯一对我有效的答案。

【解决方案5】：

抱歉，事件处理程序确实不需要。你需要的是标签中的另一个元素来点击。

<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!!!

【讨论】：

$('selector')[0].click() 实际上会处理至少一种触发事件处理程序不会处理的情况：让浏览器将其识别为触发协议处理程序的实际点击关联。在单击事件上调用触发器不会导致关联的应用程序启动。感谢您将其包含在您的答案中！
是的，.click() 正是我需要的！
$('#test2 span').trigger('click');帮助，因为它可以在新选项卡中打开一个网址，但 $('#test1')[0].click();正在打开一个弹出窗口。
当我尝试处理点击背景元素时： $('#titleee a').trigger('click'); -> 不工作！ $('#titleee a')[0].click(); -> 工作！
$('#test1')[0].click();是救世主。非常感谢

【解决方案6】：

这是如何触发事件的演示

<!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>

【讨论】：

【解决方案7】：

您应该调用元素的原生.click() 方法或使用createEvent API。

欲了解更多信息，请访问：https://learn.jquery.com/events/triggering-event-handlers/

【讨论】：

欢迎来到 Stack Overflow！虽然这可能是解决问题的一个有价值的提示，但一个好的答案也可以证明解决方案。请edit 提供示例代码来说明您的意思。或者，考虑将其写为评论。

【解决方案8】：

如果您尝试在锚点上触发事件，那么您拥有的代码将起作用。

$(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();
});

【讨论】：

【解决方案9】：

对于链接，这应该有效：

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

【讨论】：

【解决方案10】：

由于这个问题在“触发对<a> 元素的点击”方面在 Google 中排名第一，但实际上没有答案提及您是如何做到这一点的，这就是您的做法：

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

说明：您在底层 html 元素上触发了 click，不是 jQuery 对象。

欢迎谷歌员工 :)

【讨论】：

"你触发了对底层 html 元素的点击，而不是 jQuery 对象。" -- 这点击为我，谢谢！

【解决方案11】：

我们可以通过多种方式做到这一点...

案例 - 1

我们可以像这样使用trigger：$("#myID").trigger("click");

案例 - 2

我们可以像这样使用click()函数：$("#myID").click();

案例 - 3

如果我们想在programmatically 上编写函数，请点击 then..

$("#myID").click(function() {
  console.log("Clicked");
// Do here whatever you want
});

案例 - 4

// Triggering a native browser event using the simulate plugin
$("#myID").simulate( "click" );

你也可以参考这个：https://learn.jquery.com/events/triggering-event-handlers/

【讨论】：

【解决方案12】：

最短答案：

$('#titlee a').click();

【讨论】：