在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/