Bootstrap Maxlength with dynamically generated text boxes

Question

Hope anyone can help.

I am using Bootstap Maxlength on textareas that are being dynamically generated by cloning from a template. The template counter works perfectly (awesome plugin by the way!!!) because it is natively in the html. But when it creates a clone, the elements are generated in the DOM dynamically and so the plugin doesn't work because, I'm thinking, it doesn't recognize the new elements as existing. Am not very familiar with jquery, so wouldn't really know how to create a function to get around this.

Jquery's .on function doesn't seem to work. I tried this by calling it at the bottom of the page it's on:

$(document).on('ready', function() {
    $("textarea").characterCounter({
        limit: 120
    });
});

I'm pretty sure that's not sematically correct, but I don't have a clue how else to do it. If anyone has any answers, I'd be forever in your debt :)

Thanks!

Answer 1

Yes you are rite ! Call the function after the elements are generated in the DOM dynamically

While generating textbox do the following

Step 1 : Genereate textbox by cloning, then

Step 2 : Call the Function $("textarea").characterCounter({limit: 120});

For Example:

function Clone(){
GenerateTextBoxes();
$("textarea").characterCounter({limit: 120});
}