Question

i just met a strange behavior jQuery and can’t figure out any more or less slight solution.
Say, i have textarea and button. I want to disable button if textarea is empty.
For this i have a handler which does this job.

Here is the code:

// textarea control
var $textarea = $('#myTextarea');
var $button = $('#myButton');
$textarea.on('input propertychange', function() {
    if($textarea.val().length > 0) {
        $button.removeClass('disabled').removeAttr('disabled');
    } else {
        $button.addClass('disabled').attr('disabled', 'disabled');
    }
});
$button.on('click', function() {
    if ($button.attr("disabled") != null) {
        console.log('Disabled!');
        return false;
    } else {
        // do some stuff and eventually erase textarea 
        $textarea.val('');
    }
});

My trouble is when i erase textarea (the end of the code) it doesn’t disable the button. Any ideas would be appreciated (actually it’s slight adaptation of my code but the situation reflected pretty good, hope it would be clear for you, thanks!)

UPD
Nothing found on stackoverflow doesn’t help.

UPD2
As i said in the begin, i was looking not for workaround like force trigger event, i thought it’s possible to catch any event fired by $textarea.val(); Sure @Madbreaks and @epascarello ‘s solutions work pretty good, thanks guys.

Answer 1

Maybe just add this:

else {
    // do some stuff and eventually erase textarea 
    $textarea.val('');
    // notify
    $textarea.trigger('propertychange');
}