CODEWITHSUNDEEP
javascripthtmlangularjs
Guilherme Oderdenge
Guilherme Oderdenge

Reputation: 5001

Change status when I click in the child of an element (+AngularJS)

The goal

Change status when I click in the child (<i>) of an element (<li>)

The problem

Nothing happens when I click in <i>, that is child of <li>.

Details

I'm using AngularJS with ng-click. See:

<li ng-click="openNavigator($event)">
    <i class="ico ico-home"></i>
</li>

Update

Guys, you are right — it's working! The problem, actually, is a little bit further.

See this jsFiddle. If you click exactly on the button, the console retrieves back to you a specific result; otherwise, if you click exactly on the icon, you get another response from $event.target.

This behavior isn't good for me — it's flimsy. In my real application I need to work with parents, siblings, etc. and that incosistence unleashes expected, but unwanted, results.

Can you all see my problem? If so, ideas?

Thanks in advance!

Upvotes: 0

Views: 88

Answers (2)

dcodesmith
dcodesmith

Reputation: 9614

HTML

<div ng-app='currentApp' ng-controller='ACtrl'>
    <li class="btn btn-primary">
        <i class="fa fa-phone" ng-click="openNavigator($event)"></i>
    </li>
</div>

CONTROLLER

currentApp.controller('ACtrl', ['$scope', function ($scope, $event) {
    $scope.openNavigator = function($event) {
        var target = $event.target['parentElement' || 'patentNode'];
        console.log('li parent', target);
    }
}]);

Since the i tag is a child of the li and the click event is inconsistent, then I suggest you target the i tag on click and then grab the parent. You can say it's the bubbling down, which is correct, So to fix it target the i and it won't bubble up.

The main reason this is an issue is because AngularJS doesn't have event delegation functionality like jQuery does, so you can't specifically target the li tag.

The fiddles been updated too!

JSFIDDLE

Upvotes: 1

gab
gab

Reputation: 4073

It should work. Here is a plunker

Upvotes: 1

Related Questions