How can I make this .live() in jQuery

Question

I'm using jQuery plugin called charCount to display a character counter for some textareas, it works great, however when I add new text areas on the page (dinamically), the new text areas doesn't have the counter, I'm newbie, here is how I use the plugin:

$('.message-form').charCount({ allowed: 140, warning: 20 });

Update Solution:

$(".message-form").live("click", function(){
        if ($(this).data('hascharcount') == undefined) {
            $(this).data('hascharcount', true).charCount({ allowed: 140, warning: 20 });
        }
    });

Answer 1

It sounds like you need to initialize the charCount on each text area after you dynamically add them to the page. If you only have the line above, it will only impact the textareas that are on the page at the time the page loads. So you would do something like this:

//add the textarea with an ID of 'newTextarea1'
//then use charCount on the new textarea
$('#newTextarea1').charCount({ allowed: 140, warning: 20 });

Answer 2

The simplest way would just be to run that method on any new elements created.

$('<textarea ...>').appendTo('#wherever').charCount({ allowed: 140, warning: 20 });

But you asked about doing it using on() which means you don't want to do that.

But

$('.message-form').charCount({ allowed: 140, warning: 20 });

can't simply be made to use on() as on() binds an event. Rather than edit a plugin which may have updates by the author at any time which would mean re-fiddling it, write around it.

So, if you don't want to call .charCount each time after dynamically creating the elements, you can do this which will call it contextually (i.e. not until the user actually uses the element).

$(document).on('focus', '.message-form', function(){
    if (typeof $(this).data('hascharcount')=='undefined') {
        $(this).data('hascharcount', true).charCount({ allowed: 140, warning: 20 });
    }
})

N.B. A lot of people assume .on() is an alias of the depreciated .live() which it isn't. To use on() as live(), i.e. for elements that don't exist at the time it's run, it needs something that already exists to anchor to such as the parent div that content is created inside of or, if you're lazy, document.

Answer 3

Try using .on() with the focusin event while targeting the parent container of your selector .message-form like :

$("#parentContainer").on("focusin", function(){
  $('.message-form').charCount({ allowed: 140, warning: 20 });
}); // on

... or you could target the body tag or the document instead like :

$("body").on("focusin", function(){
  $('.message-form').charCount({ allowed: 140, warning: 20 });
}); // on

... this will allow you to use your plugin with present and future elements (no need to re-initialize your plugin every time you add a new element)

I have successfully used that method with other plugins that don't support dynamically added elements as you could see here https://stackoverflow.com/a/9084293/1055987

NOTE : .on() requires jQuery v1.7+, otherwise .delegate() is recommended for lower versions.

EDIT : I was expecting to find a callback within the Character Count plugin but it doesn't exist ...so, in order to avoid the counter duplication, we could tweak the code this way :

$("#myForm").on("focusin", '.message-form', function() {
    $(this).next("span.counter").remove();
    $(this).charCount({
        allowed: 140,
        warning: 20
    });
}); // on

See working DEMO

Answer 4

When you add a new textarea, look within the element you add it using find() for the new one and call plugin on that element only

Assuming you have some sort of row structure, or wrapper for the textarea:

var newDiv=$('<div class="foo"><textarea class="message-form"></textarea></div>').appendTo('#content')

newDiv.find('.message-form').charCount({ allowed: 140, warning: 20 });