JQuery document ready and ajax

Question

I have to resize the textArea tags of my page which have the class : textAreaGroup

First only two textArea tags are loaded then using ajax, I load the others.

I have this code:

jQuery(document).ready(function(){  
    var orig_h;
    jQuery(".textAreaGroup").on("focus", function(){
        orig_h=jQuery(this).height();
        jQuery(this).height( jQuery(this)[0].scrollHeight );
    }).on('blur', function(){
        jQuery('.textAreaGroup').height(orig_h)    
    });
});

it works only with the two first textArea tags, and it s not applied for the new ones loaded via Ajax.

What should I do to make this code available for all the textArea tags?

http://learn.jquery.com/events/event-delegation/ and Visit http://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on — Satpal, Apr 22 '14 at 11:04

Reinder Wit · Accepted Answer · 2014-04-22T11:27:10.690

you could try this, where you set the selector inside the function to create event delegation:

jQuery(document).ready(function() {

    jQuery('form').on('click', '*', function(){
        if(this.nodeName === "TEXTAREA") {
            var hght = this.scrollHeight;
            jQuery(this).css({'height':hght + 'px'})
        }
        else {
            jQuery('textarea').attr('style', '');
        }
    })

});

even though it's not using the focus() and blur() events, the outcome will be the same.

A working fiddle...

JQuery document ready and ajax

1 Answers1