javascript 为什么 jQuery 不能触发对锚标记的原生点击?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20782534/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 19:18:11  来源:igfitidea点击:

Why jQuery cannot trigger native click on an anchor tag?

javascriptjquery

提问by Miaonster

Recently I found jQuery cannot trigger the native click event on an anchor tag when I'm clicking on other elements, the example below won't work:

最近我发现当我点击其他元素时,jQuery 无法触发锚标签上的原生点击事件,下面的例子不起作用:

html

html

<a class="js-a1" href="new.html" target="_blank">this is a link</a>
<a class="js-a2" href="another.html" target="_blank">this is another link</a>

javascript

javascript

$('.js-a1').click(function () {
  $('.js-a2').click();
  return false;
});

And here is the jsfiddle - 1. Click on the first link won't trigger native click on the second one.

这是jsfiddle - 1。单击第一个链接不会触发本机单击第二个链接。

After some searches, I found a solution and an explanation.

经过一番搜索,我找到了解决方案和解释。

Solution

解决方案

Use the native DOM element.

使用原生 DOM 元素。

$('.js-a1').click(function () {
  $('.js-a2').get(0).click();
  return false;
});

And here is the jsfiddle - 2.

这是jsfiddle - 2

Explanation

解释

I found a post on Learn jQuery: Triggering Event Handlers. It told me:

我在Learn jQuery: Triggering Event Handlers上找到了一篇文章。它告诉我:

The .trigger() function cannot be used to mimic native browser events, such as clicking on a file input box or an anchor tag. This is because, there is no event handler attached using jQuery's event system that corresponds to these events.

.trigger() 函数不能用于模拟本地浏览器事件,例如单击文件输入框或锚标记。这是因为,没有使用对应于这些事件的 jQuery 事件系统附加事件处理程序。

Question

问题

So here comes my question:

所以我的问题来了:

How to understand 'there is no event handler attached using jQuery's event system that corresponds to these events'?

如何理解“没有使用对应于这些事件的 jQuery 事件系统附加事件处理程序”

Why is there not such corresponding event handler?

为什么没有这样对应的事件处理器?

EDIT

编辑

I update my jsfiddles, it seems there's and error on the class name.

我更新了我的 jsfiddles,类名似乎有错误。

采纳答案by Arie Xiao

there is no event handler attached using jQuery's event system that corresponds to these events

没有使用对应于这些事件的 jQuery 事件系统附加事件处理程序

This means, at this point of the learning material, no jQuery event handlers has been attached to these elements using .click(function() {}or .bind('click', function () {}), etc.

这意味着,在学习材料的这一点上,没有使用.click(function() {}.bind('click', function () {})等将 jQuery 事件处理程序附加到这些元素。

The no-argument .click()is used to trigger (.trigger('click')) a "click" event from jQuery's perspective, which will execute all "click" event handlers registered by jQuery using .click, .bind, .on, etc. This pseudo event won't be sent to the browser.

无参数.click()被用于触发(.trigger('click'))从一个jQuery的角度看“click”事件,这将使用执行的jQuery注册的所有“点击”事件处理程序.click.bind.on等这个伪事件将不会被发送到浏览器。

.trigger()

Execute all handlers and behaviors attached to the matched elements for the given event type.

。扳机()

执行附加到给定事件类型的匹配元素的所有处理程序和行为。

Check the updated jsFiddle example, click on the two links to see the difference. Hope it helps.

检查更新的 jsFiddle 示例,单击两个链接以查看差异。希望能帮助到你。

回答by Bhojendra Rauniyar

First of all you need to prevent the default behaviour of link

首先你需要防止链接的默认行为

$('.js-a1').click(function (e) {
  e.preventDefault();
  $('.js-a2').get(0).click();
  return false;
});

And to trigger the click event you can also use .trigger('click')better way

并且要触发点击事件,您还可以使用.trigger('click')更好的方法

And the event handler is used like this:

事件处理程序是这样使用的:

$(document).on('click', '.js-a1',function(){//code in here});
// here now .js-a1 is event handler

回答by Dipesh Parmar

i think you forgot to read documentation.

我想你忘记阅读文档了。

Document says :

文件说:

// Triggering a native browser event using the simulate plugin
$( ".js-a2" ).simulate( "click" );

回答by powderflask

Old question, but here's a nifty and simple solution: You can basically "register" a native JS event with jQuery by assigning the DOM element's onEvent handler to be the native event. Ideally, we would check first to ensure the onEvent handler has not already been set.
For example, 'register' the native JS click event so it will be triggered by jQuery:

老问题,但这里有一个漂亮而简单的解决方案:您基本上可以通过将 DOM 元素的 onEvent 处理程序分配为本机事件来使用 jQuery“注册”本机 JS 事件。理想情况下,我们会首先检查以确保尚未设置 onEvent 处理程序。
例如,“注册”原生 JS 单击事件,以便它由 jQuery 触发:

$('.js-a1').click(function (e) {
  $('.js-a2').click();
  e.preventDefault();
});

var trigger_element = $('.js-a2')[0]; // native DOM element
if (!trigger_element.onclick) {
  trigger_element.onclick = trigger_element.click;
}

Here is a fiddle: http://jsfiddle.net/f9vkd/162/

这是一个小提琴:http: //jsfiddle.net/f9vkd/162/

回答by Rajasekhar

You have to use $("selector").trigger('click')

你必须使用 $("selector").trigger('click')