javascript - jQuery 单击事件不会在 AngularJS DOM 中触发

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/