1

I have tried many ways to click a button on click of other button of AngularJS.

Dom element:

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

Button:

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

Expected results

On click of button nav-bar-link should be clicked.

Attempted Solutions

$(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;
});

These answers were tested from browser console.

Please let me know if there is any solution to trigger the click. Nothing worked from the above solutions.

I would also accept both jQuery and JavaScript solutions.

user2936008
  • 1,317
  • 5
  • 19
  • 42
  • If you are using `Angular` why aren't you doing `$scope.someMethod = fucntion() {}`? – Gary Holiday Aug 04 '16 at 15:59
  • there is an $scope functon written in angular JS and I am trying to attempt to trigger a click on the function when click happened on the other element. I just need a way to enable the trigger using Jquery. Note: Jquery perfectly works fine in the broswer. Why I am not able to trigger the click event in the DOM – user2936008 Aug 04 '16 at 16:06

1 Answers1

3

You should specified type of selector, in your case .nav-bar-link, change

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

by

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

UPDATED

You do not need to write much code to call an event, if you use angular you can use triggerHandler:

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

Result: https://jsfiddle.net/cmedina/4pkdros9/

CMedina
  • 4,034
  • 3
  • 24
  • 39
  • updated the question . editing was problem. Can you please check now – user2936008 Aug 04 '16 at 15:52
  • I dnt understand your jsfiddle since there is no angular JS implementation. – user2936008 Aug 04 '16 at 15:55
  • .nav-bar-link ng-click funtion written in angular js. I dnt think ur answer will work. you are writting seperate function call with jquery – user2936008 Aug 04 '16 at 16:01
  • @user2936008 check http://stackoverflow.com/questions/22447374/how-to-trigger-ng-click-angularjs-programmatically – CMedina Aug 04 '16 at 16:03
  • I cannot use angular methods since I am trying to trigger the click from third party application, I can only use jquery . But the triggered element has angular method. To be precise I need : jquery click event on angular js DOM. – user2936008 Aug 04 '16 at 16:08
  • @user2936008 You can run those commands from javascript console, so you are essentially outside angular (angular is a global variable exposed by AngularJS on a window object) check this answer http://stackoverflow.com/questions/22777797/how-to-trigger-emulate-click-ngclick-from-jquery – CMedina Aug 04 '16 at 16:17