Home > Back-end >  AngularJS Jquery keyup event on textarea inside ng-if
AngularJS Jquery keyup event on textarea inside ng-if

Time:01-06

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?

CodePudding user response:

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.

  • Related