Function that responds to new DOM

Question

I have the following function that counts the number of characters left the user has to type in a textarea:

$("textarea").keyup(function() {
    var max = 500;
    var length = $(this).val().length;
    var char = max - length;
    if (length > max) {
        $(this).parent().find('.counter span').html('<div class="text-error">' + char + '</div>');
    } else {
        $(this).parent().find('.counter span').text(char);
    }
});

If I introduce a new DOM to the page, the above function doesn't work for the newly introduced textarea. How can I make it work with new DOMs?

Thanks.

The DOM is the entire document model, what you're talking about is DOM Elements. Just for future reference :) — MattDiamant, Nov 20 '13 at 22:35
read up on event delegation, this question gets asked daaily here — charlietfl, Nov 20 '13 at 22:39

MattDiamant · Accepted Answer · 2015-05-14T18:14:49.533

6

You want the on function in jQuery.

$("body").on("keyup", "textarea" , function() { ...

http://api.jquery.com/on/

edited May 14 '15 at 18:14

answered Nov 20 '13 at 22:34

MattDiamant

8,561
4
37
46

2

Specifically read about ***Direct and delegated events*** – NaNpx Nov 20 '13 at 22:38

score 2 · Answer 2 · answered Nov 20 '13 at 23:44

MattDiamant's answer is good for your situation but I would just like to add about the situation of a Copy-Paste.

If the user copies from another word document and pastes it in the keyarea using the Mouse only(Right-click -> Paste), the keyup wont be triggered.

So, in addition to 'keyup', I would advice you to add the events 'input', 'propertychange', so your onfunction will be:

$("body").on('keyup input propertychange', 'textarea', function() { ... });

Function that responds to new DOM

2 Answers2