AngularJS Jquery keyup event on textarea inside ng-if

Issue

I have a jQuery event for textarea inputs in my AngularJS app.

The event works fine for all textarea inputs except textareas who are inside of an ng-if block.

This one triggers the event:

<tr>
    <td>
        <textarea name="id1" id="id1" ng-model="vm.id1"></textarea>
    </td>
</tr>

But like this it wont (doesnt matter if its ng-if or ng-show):

<tr ng-if="vm.showElement">
    <td>
        <textarea name="id1" id="id1" ng-model="vm.id1"></textarea>
    </td>
</tr>

Here is the event:

$('textarea').on('keyup', function (e) {
    const elem = document.getElementById(this.id)
    ...
});

Why is it not working?

Solution

Bind keyup event directly on textarea like this:

<tr ng-if="vm.showElement">
    <td>
        <textarea name="id1" id="id1" ng-model="vm.id1" ng-keyup="onKeyUp($event)"></textarea>
    </td>
</tr>

and declare this onKeyUp function in your code. It does not working using jQuery, because at the time when you bind keyup event using jQuery, textarea element is not visible.

Answered By - AvgustinTomsic