AngularJS DOM 中不会触发 jQuery 点击事件

Question

我尝试了很多方法来点击AngularJS的其他按钮。

Dom 元素：

<a class="nav-bar-link" ng-click="someMethod()">

按钮：

<a class="button">Log in</a>

预期结果

点击按钮时应该点击导航栏链接。

---

尝试的解决方案

$(document).on('click', '.button', function(event) {
  console.log('came');
  event.preventDefault();
  $(".nav-bar-link").click();
});

$(document).on('click', '.button', function(event) {
  console.log('came');
  event.preventDefault();
  $(".nav-bar-link").triggerHandler('click');;
});

$(document).on('click', '.button', function(event) {
  console.log('came');
  var a = $('nav-bar-link')[0];
  var e = document.createEvent('MouseEvents');
  e.initEvent('click', true, true);
  a.dispatchEvent(e);
});

$(".button").click(function() {
  setTimeout(function() {
    $('.nav-bar-link').trigger('click');
  }, 100);
  return false;
});

这些答案是从浏览器控制台测试的。

如果有任何触发点击的解决方案，请告诉我。上述解决方案均无效。

我也接受 jQuery 和 JavaScript 解决方案。

Answer 1

你应该指定选择器的类型，在你的情况下.nav-bar-link，改变

$("nav-bar-link").click(); 

通过

$(".nav-bar-link").click(); 

更新

你不需要写太多代码来调用一个事件，如果你使用angular你可以使用triggerHandler：

$(document).on('click', '.button', function(event) { 
     console.log('came'); 
     angular.element('.nav-bar-link').triggerHandler('click');
});

结果： https://jsfiddle.net/cmedina/4pkdros9/