Correct way to pass 'this' to function in javascript

Question

My javascript is pretty basic so I though I'd ask the experts as to whether my current method is right or not, and if there are better, more accepted ways.

Normally I would use jquery's .on event to trigger a function, like this:

$("body").on("input", "textarea", textareaAutoGrow);

function textareaAutoGrow() {
    var pad = $(this).outerHeight(false) - $(this).innerHeight();

    this.style.height = "auto";
    this.style.height = (this.scrollHeight + pad) + "px";
}

This way, 'this' is passed automatically, however I now need to do the same thing on the window resize event for all textareas, not just one specific one.

Here's how I've done it:

$(window).on("resize", refreshAutoGrow);

function refreshAutoGrow() {
        $el = $(".text-field.autogrow").filter(function () {
            return $(this).val();
        });

        $el.each(function () {
            textareaAutoGrow.call(this);
        });
    }

I've called the textareaAutoGrow function using .call - something I picked up from looking at jquery widgets.

It works but as I said, it's very much a guess - is this the right approach, or are there more accepted ways of doing what I want?

eisbehr · Accepted Answer · 2016-06-29 11:10:10Z

1

Trigger it with each on resize to loop the textareas:

function textareaAutoGrow() {
    var pad = $(this).outerHeight(false) - $(this).innerHeight();

    this.style.height = "auto";
    this.style.height = (this.scrollHeight + pad) + "px";
}

$("body").on("input", "textarea", textareaAutoGrow);
$(window).on("resize", funtion() {
    $("textarea").each(textareaAutoGrow);
});

edited Jun 29, 2016 at 11:10

answered Jun 29, 2016 at 10:59

eisbehr

12.5k8 gold badges42 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jcubic Over a year ago

first on("input" will not work on dynamic textareas you need to use the code form the question $("body").on("input", "textarea"

jcubic Over a year ago

now the second code will not work because textareas will hold reference to body.

eisbehr Over a year ago

Ahh, sure. ;) Dumb me. I removed that part then. It would be overhead to do it in this answer.

Collectives™ on Stack Overflow

Correct way to pass 'this' to function in javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related