jQuery.on("click") does not work in AngularJs

Question

I have an AngularJs directive like this:

app.directive("showSuccess", function () {
        return {
            restrict: "A",
            link: function (_scope, _element) {
                _scope.$watch("successMessage", function (newVal) {
                    if (newVal) {
                        $(_element).find("#successMessage").html(newVal);
                        $(_element).slideDown().delay(3000).slideUp();
                    }
                });

                // Below code does not work
                $(_element).find(".hide-message").on("click", function () {
                    $(_element).slideUp();
                    _scope.successMessage = "";
                });
            }
        };
    });

The related HTML is:

<div class="ui-state-success" show-success>
    <i class="icon-ok-sign small"></i>
    <span id="successMessage"></span>
    <i class="icon-remove hide-message"></i>
</div>

When the panel is triggered to slide down, the screen shot is:

The problem is, when I click the "×", the panel won't slide up (although that it will slide up anyway after 3s delay).

I know I can do this using ng-click. But anyone knows why it does not work in this case? Thanks.

@Ronnie, yes, I know I can do that in that way. But do you have any idea what the problem is in this case? Thanks. — Ealon
– Ealon, Commented Feb 3, 2016 at 22:40
is $(_element).find(".hide-message") resolving? Can you console.log() the element you're trying to select and verify it is the right dom element? Even just a console.log() in the click function to see if it is even being called — Ronnie
– Ronnie, Commented Feb 3, 2016 at 22:42

Stryner · Accepted Answer · 2016-02-03 22:44:08Z

2

It's because jQuery animations are queued. You're calling .slideUp() on it and expecting it to slide instantly; however, it is currently waiting out it's 3 second delay.

One solution is to use .stop(true, false) to cancel the previous queued animation:

$(_element).find(".hide-message").on("click", function () {
    $(_element).stop(true, false).slideUp();
    _scope.successMessage = "";
});

answered Feb 3, 2016 at 22:44

Stryner

7,3363 gold badges21 silver badges20 bronze badges

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

1 Comment

Ealon Over a year ago

It works in this way! Thanks so much! I will accept your answer later.

Collectives™ on Stack Overflow

jQuery.on("click") does not work in AngularJs

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related