AngularJS: handle click on a div with certain class

Question

I want to execute a JavaScript code, let's say a simple alert() function, if a user clicks on element with a special class within my AngularJS application. If I were to use simple jQuery, I would do it like that:

$('.specialClass').on('click', function(){
    alert('hi');
});

This is exactly what I have in main.js file that I have included in my index.html. I even have several $(document).on('click',... pieces of code there that do actually work. However, the $('.specialClass').on('click'... part does not work. I have no idea how to actually implement this as elements with class specialClass could be encountered all over the place in different views, controllers, directives, etc. basically everywhere in the app. Any ideas how to approach this problem?

Chanthu · Accepted Answer · 2016-07-20 11:48:29Z

3

angular.module('app', []).directive('clickable', function() {
  return {
    restrict: 'C',
    link: function(scope, elem, attrs) {
      elem.bind('click', function() {
        scope.$apply(function() {
          if ($(elem).is('div.clickable')) {
            alert('matches div.clickable');
          } else {
            alert('does NOT matche div.clickable');
          }
        });
      });
    }
  }
});

.black {
  color: black;
}
.blue {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div class="black clickable">clickable black div</div>
  <div class="blue not-clickable">not clickable blue</div>
  <p class="blue clickable">clickable blue p</p>
</div>

If you want a pure angular way of doing it, you could create a directive, which can be applied through class definition. The name of the directive would be name of the class you want to add clicks to.

See the example above.

EDIT: Answer to comment I'm targeting is actually a query looking something like that div .specialClass and I would only care for the clicks if it's within the div

JQuery has a function called .is(selector) that can be applied on elements to see if they satisfy a given selector.

So, if there is a element which is <div class="special"></div> doing <elem>.is('div.special') where <elem> is any div with class special, that function would return true.

edited Jul 20, 2016 at 11:48

answered Jul 20, 2016 at 11:32

Chanthu

1,7941 gold badge15 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mmvsbg Over a year ago

Good solution but what if the class I'm targeting is actually a query looking something like that div .specialClass and I would only care for the clicks if it's within the div? I could, of course, add another class and use your solution, but the problem is that the app is already existing so I would have to do through all the code and add that new class...

Chanthu Over a year ago

@mmvsbg You could make use of jquery's .is(selector) function. See the updated answer.

Abdul Rehman Sayed · Accepted Answer · 2016-07-20 11:31:04Z

-2

Use on for a document & add your class as a parameter Ref : http://api.jquery.com/on/

$(document).on('click', '.specialClass', function () { 
//your code here..
    });

Edit : For the DownVoters.

This is not the angular way but will work in your case with minimal change impacts of creating those directives by finding all those elements

answered Jul 20, 2016 at 11:31

Abdul Rehman Sayed

6,7129 gold badges51 silver badges79 bronze badges

2 Comments

Abdul Rehman Sayed Over a year ago

@HarshadHirapara yes it is not "angular" but op is already using it at a lot of places in his application.

mmvsbg Over a year ago

Yes, agreed, but I did not ask for specific AngularJS solution either. I just want to handle the clicks somehow and this solution could actually be more effective in my case although it's not the angular way.

Collectives™ on Stack Overflow

AngularJS: handle click on a div with certain class

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related