I'm having an issue where my click event is getting called twice. Not sure what I'm missing but I've only included this directive once in my application. I have tried adding the directive to one element only but the call is still happening twice.

Can someone take a look at the code and tell me what i'm missing please?

angular.module('mymodule', [])
.directive('mydirective', function () {
    return {
        restrict: 'AE',
        link: function ($scope, $element, $attrs) {

            $element.children().bind('click', function () {

                console.log("test" + this);

                if ($element.hasClass('active')) {
                    $element.removeClass('active');
                    return;
                } else if (!$element.hasClass('active')) {
                    $element.addClass('active');
                    return;
                }
            });
        }
    }
});

I'm having an issue where my click event is getting called twice. Not sure what I'm missing but I've only included this directive once in my application. I have tried adding the directive to one element only but the call is still happening twice.

Can someone take a look at the code and tell me what i'm missing please?

angular.module('mymodule', [])
.directive('mydirective', function () {
    return {
        restrict: 'AE',
        link: function ($scope, $element, $attrs) {

            $element.children().bind('click', function () {

                console.log("test" + this);

                if ($element.hasClass('active')) {
                    $element.removeClass('active');
                    return;
                } else if (!$element.hasClass('active')) {
                    $element.addClass('active');
                    return;
                }
            });
        }
    }
});

• javascript
• angularjs

Share Improve this question Follow asked Jan 27, 2014 at 9:57 user686483user686483 1,50666 gold badges1919 silver badges2929 bronze badges 2

• 1 $element.toggleClass('active'); return; for all your condition there. Not sure why double click is happening... try event.stopPropagation(); – Ashish Kumar Commented Jan 27, 2014 at 10:01
• try adding the click event to parent element and not to children, for example try $element.parent()..bind('click', function () ... – Alex Choroshin Commented Jan 27, 2014 at 10:02

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

use this inside the click function to stop bubbling the event

 e.stopPropagation();

To know more check this

I know I'm late in answering this, and a few months back I was facing this issue too. However, a gentleman over here asked me to append this into the directive. And, it worked great!

e.stopImmediatePropagation();