Question

I’m having some problems binding to the keyup event of a textarea control. I’m trying the below

var shortDescInput = $('nobr:contains("Short Description")').closest('tr').find($('textarea[title="Short Description"]'));

    // this doesn't work
    shortDescInput.bind('keyup', function () {
        countShortDescChars();
    });

    // Nor this
    shortDescInput.keyup(function () {
        countShortDescChars();
    });

Am I missing something here that’s really obvious? This is working for other controls, for example binding events to radiobuttons. I’ve checked and I’m defiantly selecting the right textarea with

var shortDescInput = $('nobr:contains("Short Description")').closest('tr').find($('textarea[title="Short Description"]'));

I just never seem to get the keyup event….

Answer 1

find($('textarea[title="Short Description"]')) is highly inefficient. For your purposes, find should take a selector as it’s argument.

When you pass in a jQuery object to find, jQuery first queries the DOM from the top and finds all elements that match that selector. Then, find loops through all of these results until it finds one that matches the specified parents.

You should, instead, use:

find('textarea[title="Short Description"]')

Also, use .on instead of .bind. .bind is set to be deprecated in future releases for it’s inefficiency.

shortDescInput.on("keyup", countShortDescChars);

And the revised code:

$(function () {
    var shortDescInput = $('nobr:contains("Short Description")').closest('tr').find('textarea[title="Short Description"]');

    shortDescInput.on("keyup", countShortDescChars);
});