0

I need to attach some code to all my textarea elements, this is working fine when run in 

$(document).ready(function() {
     $('textarea').textareaCount(options);
});

But I have textarea elements loaded via Ajax and templates, so any textarea elements loaded after the document is ready aren't included in the jQuery select and lose the behaviour I'm adding.

What's the best way of dealing with this?

Jammer
  • 9,969
  • 11
  • 68
  • 115

3 Answers3

1

I would suggest adding it as the textarea is focussed:

$(document).on( 'focus', 'textarea', function( ) {
    if( !$(this).data( 'hasSetup' ) ) {
        $(this).data('hasSetup',true).textareaCount(options);
    }
} );

That form of .on means it will occur for all child elements of document which match the selector (textarea). That means it applies to all current and future elements. So each time a textarea is focussed, the code will run. Since we actually only want it to run once per textarea, I've used a variable to check if the counter has already been added to the current textarea. Using .one isn't an option, since that would only apply to the first textarea.

Dave
  • 44,275
  • 12
  • 65
  • 105
  • This is working on all my textarea elements as expected but it repeatedly adds more after the first so there appears to be something wrong with storing the `hasdata` value of true. – Jammer Aug 10 '13 at 23:03
  • hmm, maybe `textareaCount` doesn't chain. In that case, try changing the line to `$(this).data('hasSetup',true).textareaCount(options)` instead. – Dave Aug 10 '13 at 23:04
  • Bingo, that got it working perfectly. I think it might take me a while to work out why :) – Jammer Aug 10 '13 at 23:09
  • @Jammer this may help you: http://stackoverflow.com/q/7475336/1180785 (chaining depends on the plugin maker doing particular things. I guess this plugin maker didn't do them) – Dave Aug 10 '13 at 23:11
0

actually you need to call textareaCount(options) again after document ready by your ajax

for example

when you click on a button you want to count the textareas:

$("#button").off('click').on('click', function() {
     $('textarea').textareaCount(options);
});

or this for earlier jquery versions

$("#button").die('click').live('click', function() {
     $('textarea').textareaCount(options);
});
Mohammad Masoudian
  • 3,483
  • 7
  • 27
  • 45
  • that's not what `textareaCount` does. He should have made it clearer, but a google search is sufficient: http://roy-jin.appspot.com/jsp/textareaCounter.jsp – Dave Aug 10 '13 at 22:26
0

inside of ready

$(document).ready(function() {

when you attach code to your textareas initially, give them a class to identify them as already having the code attached.

$('textarea').textareaCount(options);
$('textarea').addClass('alreadyHasCount');

then, add a dom element listener to the parent that will have textareas insserted. make the listener look for any textareas that are not of the class 'alreadyHasCount', attach the code, then give them the 'alreadyHasCount' class

$("#textAreaParent").bind("DOMNodeInserted DOMSubtreeModified",function(){
    $('textarea:not(.alreadyHasCount)').textareaCount(options);
    $('textarea:not(.alreadyHasCount)').addClass('alreadyHasCount');
});

});
chiliNUT
  • 18,989
  • 14
  • 66
  • 106
  • This is working for the static textarea elements but not the dynamically loaded ones. I've changed the id to #parent as per my parent but it's still not working. – Jammer Aug 10 '13 at 22:54
  • hmm. well, first, please see my edit, where I added the DOMSubtreeModified event, and see if that helps. 2, I dont knwo what the textareaCount function is, I made a sample where I simply replaced that with a simple style attribute change and it works in chrome and FF. 3. I think IE will just curl up into the fetal position and suck its thumb for all of this. – chiliNUT Aug 10 '13 at 23:06
  • also maybe check the scope of the variable options to make sure it is available in the bind event. – chiliNUT Aug 10 '13 at 23:07