Apply jQuery function to each newly created (dynamic) element

Question

I have a button that creates a dynamic textarea field with a unique id. Each time a new element is created, I want jQuery to trigger on those dynamic textarea fields.

I tried the .on('click') method and it doesn't run the jQuery on the dynamic element unless the button that generates them is pushed twice. So that won't work. Secondly, when I create a second dynamic textarea field, it doesn't work at all, even if I click the button twice.

    jQuery('button').on('click', function() {
        var dynamicElement = jQuery('.parentclass').find('textarea').attr('id');

//countChar is part of a function not displayed here (works fine).

    countChar(jQuery('#'+dynamicElement).get(0));

//This code below never seems to apply itself to any dynamic textarea fields except for
//the first one. It needs to apply itself to all of them and trigger each time a new
//dynamic textarea field is created.

    jQuery('#'+dynamicElement).keyup(function() {
        countChar(this);
    })

    });

How would I go about making this work?

Thank you.

EDIT

Here is the function countChar (it adds a character counter and limits the characters too).

Function

function countChar(val) {
    var allowed_length = 700; // character count limit here
    var len = val.value.length;
    if (len >= allowed_length) {
        val.value = val.value.substring(0, allowed_length);
        jQuery(".chars[data-textarea="+val.id+"]").text(0);
    } else {
        jQuery(".chars[data-textarea="+val.id+"]").text(allowed_length - len);
    }
}

HTML

<tr class="parentclass">

<td class="label">
    <label>
        Custom Title
    </label>
    <span class="field-instructions">
        Please enter the content of this field.
        Remaining: <span class="chars" data-textarea="dynamic-textarea-1"></span>
    </span>
</td>

<td>
    <div class="inner">
        <textarea rows="4" id="dynamic-textarea-1" class="textarea"></textarea>
    </div>
</td>

Can include `html` ? , `js` where _"a button that creates a dynamic textarea field with a unique id"_ ? — guest271314, Apr 04 '15 at 22:23
What does `countChar ` do? Where is the function that creates the dynElement? More code please. — Mr.Web, Apr 04 '15 at 22:23
maybe something like this: https://jsfiddle.net/z7y2hp36/1/ ? I'm kind of guessing what exactly you need, as you didn't provide any html. — mkaminsky, Apr 04 '15 at 22:31
@mkaminsky I tried your solution, while it made sense. It still didn't work. I still needed to hit the button twice for it to apply the jQuery to the new textarea element. — Delto, Apr 04 '15 at 22:48
where are the multiple `textarea`s? Are you adding more of them? — mkaminsky, Apr 04 '15 at 23:49
@mkaminsky The HTML I edited into my question is the HTML that is created when the button is pushed. As you can see, it includes a textarea field. I have set it so a max of 5 additional custom fields may be entered by a user. — Delto, Apr 05 '15 at 00:02
What `.attr('id')` does is get the first element in the set's ID. Since that will always be the first `textarea` added, it will only ever get that first textarea's ID. If you want the last one created, maybe try selecting `$('.parentClass textarea:last-of-type')`. — dx_over_dt, Apr 05 '15 at 00:40

score 0 · Answer 1 · answered Apr 05 '15 at 00:33

0

What you need to do is set a variable ex. var x = document.getElementById("name of element"); then change whatever property you want, any other events needs to bee outside of the click event so it could trigger on its own. Hope this helps

answered Apr 05 '15 at 00:33

Isaac Stevens

29
2

Thanks Isaac, I'm still learning. Is there any way you can give me a code example with my jQuery? – Delto Apr 05 '15 at 00:39
Lets imagine that your method create an element , in your method countchar what you really want to do is set a property of that element, for the amount of char input in a textarea tag you could use (maxlength), therefore you will do the following, x = document.getElementById(dynamicElement ).maxlenght = 50; – Isaac Stevens Apr 05 '15 at 00:46

Apply jQuery function to each newly created (dynamic) element

1 Answers1