ng-click and child selectors

Question

I have an owl carousel that doesn't fire events on the cloned items. So, as solution people propose to move the event from direct target to its parent one:

from:

$('#multiple-carousel .item').click(function () {
        alert("click");
});

to:

$('#multiple-carousel').on('click', '.item', function () {
    alert("click");
});

Could I similarly change from my code:

<div id="multiple-carousel">
   <div class="item" ng-click="myClick($event)">...</div>
</div>

to something like:

<div id="multiple-carousel" ng-click[???".item"???]="myClick($event)??">
   <div class="item" >...</div>
</div>

are you using `ng-repeat` for the slider items by any chance? — Michael Doye, Apr 04 '17 at 09:31
Can you include part of code you use to generate items (server-side foreach)? You return HTML? — Djuka, Apr 04 '17 at 09:51

score 2 · Accepted Answer · edited May 23 '17 at 11:46

The second parameter in jquery's .on is the filter which descendants will trigger the event, however, events in AngularJS are usually handled via directives ( ng-click in this case ) which do not support the same functionality as jQuery does.

You can add click event with angular.element, however if you want to use directive ( which is the right thing to do ), you have to do something like this:

$scope.myClick = function(event) {
    if (event.target.className === 'item') {
    // do smth
    }
}

See this answer to see the difference between event.currentTarget and event.target .

ng-click and child selectors

1 Answers1