为什么jQuery不能触发锚标签上的本地点击？

Question

最近我发现当我点击其他元素时， jQuery 无法触发锚标签上的本地点击事件，如下面的示例所示：

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

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

这里有一个jsfiddle - 1。点击第一个链接不会触发第二个链接的本地点击。

经过一些搜索，我找到了一个解决方案和解释。

解决方案

使用原生DOM元素。

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

这里是jsfiddle - 2。

解释

我在 Learn jQuery 上发现了一篇文章：触发事件处理程序。它告诉我：

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

问题

那么我的问题来了：

如何理解“没有使用 jQuery 的事件系统附加相应的事件处理程序”？

为什么没有相应的事件处理程序？

编辑

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

- Miaonster

---

你尝试过使用 event.preventDefault() 吗？ - Tejasva Dhyani

@TejasvaDhyani 是的，在 jQuery 中使用 return false; 将同时执行 e.preventDefault(); 和 e.stopPropagation();。 - Miaonster

Answer 1

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

不带参数的.click()用于从jQuery的角度触发(.trigger('click'))“click”事件，这将执行由jQuery使用.click、.bind、.on等注册的所有“click”事件处理程序。这个伪事件不会发送到浏览器。 .trigger() 将为给定的事件类型执行与匹配元素相关联的所有处理程序和行为。

请查看更新的 jsFiddle 示例，单击两个链接以查看差异。希望对您有所帮助。

- Arie Xiao

Answer 2

首先，您需要防止链接的默认行为。

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

你也可以使用.trigger('click')来触发点击事件。

事件处理程序用法如下：

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

- Bhojendra Rauniyar

---

.trigger("click") 和 .click() 是相同的。 - cookie monster

同意@cookiemonster的观点，$('.js-a2').get(0)将获取一个DOM元素。 - Miaonster

另外，return false在jQuery处理程序中既包括e.preventDefault又包括e.stopPropagtion，因此你的回答中有一个是多余的。 - iCollect.it Ltd

Answer 3

虽然这是一个老问题，但这里有一个巧妙而简单的解决方案： 您可以通过将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;
}

这里有一个 jsfiddle：http://jsfiddle.net/f9vkd/162/

- powderflask

Answer 4

我认为你忘记了阅读文档。

文档中写道：

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

- Dipesh Parmar

---

什么文档？ - cookie monster

是的，它确实是这样说的。但那只是另一种解决方案。 - Miaonster

Answer 5

你需要使用$("selector").trigger('click')

- Rajasekhar

---

.trigger("click")与.click()是相同的。 - cookie monster