using live() or livequery() with a textarea character counter

Question

Hi.

I'm loading in an external chunk of html via $.get() and I want to bind a character counter to any textareas loaded within that.

Normally for this kind of task I'd use live() if it was event-based or the livequery plugin if it was a custom function. As I've been using character counter plugins I've been using livequery, but I cannot for the life of me get the char counters to work on the newly created textareas. Not sure there's much point in pasting my livequery attempt, but here it is anyway!

$("textarea").livequery(function() {
   $(this).charcounter(); //or whatever the name of the counter function is
});

I've tried a few jQuery counter plugins, two of which I've linked here:

http://plugins.jquery.com/project/TextareaCharactersCounter http://brandonaaron.net/code/countable/docs

And so far nothing has worked. The code/functions work on content which has not been loaded via jQuery $.load, $.get or $.post.

Anyone? I'm getting towards hair tearing-out stage here!

jQuery Code, which at present breaks before the slideDown() call, because of something involved in the $(data).find... line:

$.get("lib/scripts/php/ajax/create-content-forms.php", { typeId : typeId }, function(data){


                var options = { 
                    'maxCharacterSize': 200, 
                    'textFontSize': '12px', 
                    'textColor': '#5C2306', 
                    'textFamily': 'Tahoma,sans-serif', 
                    'textAlign': 'right', 
                    'warningColor': '#CC3300', 
                    'warningNumber': 40, 
                    'isCharacterCount': true, 
                    'isWordCount': false
                };

                $(data).find('textarea').textareaCount(options).end().appendTo("#contentFormContent");
                $("#contentForm").slideDown();

            });

And a relevant snippet of the HTML that is produced:

<fieldset>
    <legend>Additional information:</legend>
    <p>
       <span class="fieldtext">Description:</span>
       <textarea name="description" id="description" class="charLimitShort"><?php echo $description ?></textarea>
    </p>
</fieldset>

Answer 1

The only thing I could think is that data is not what you think.

Try this:

$.get("lib/scripts/php/ajax/create-content-forms.php", { typeId : typeId }, function(data) {


    var options = {
        'maxCharacterSize': 200,
        'textFontSize': '12px',
        'textColor': '#5C2306',
        'textFamily': 'Tahoma,sans-serif',
        'textAlign': 'right',
        'warningColor': '#CC3300',
        'warningNumber': 40,
        'isCharacterCount': true,
        'isWordCount': false
    };

    var myData = '<fieldset>' +
            '<legend>Additional information:</legend>' +
            '<p>' +
            '<span class="fieldtext">Description:</span>' +
            '<textarea name="description" id="description" class="charLimitShort">Hello</textarea>' +
            '</p>' +
            '</fieldset>';

    $(myData).find('textarea').textareaCount(options).end().appendTo("#contentFormContent");
    $("#contentForm").slideDown();

});

If that works OK then you know it is data (the server).