Skip to content
Advertisement

key up jQuery removing class

Demo

I have here a demo on validating if a class exist in a div. when there is no class another class is removed from a button. Basically what this does is when there are no disabled button the disable on add button will be removed.

This works fine if the last thing user will do is change but if the last thing he does is key up it does not work.

What is wrong here?

js

function toggleDisabled(target) {
    var $target = $(target);
    $target.toggleClass('disabled', !$target.val());
}
var $notnull = $('.notnull');

$(document).on('keyup, change', '.notnull', function (e) {
    toggleDisabled(e.currentTarget);
});
$notnull.each(function (i, el) {
    toggleDisabled(el);
});

function toggleDisabledNavButton(target) {
    var $target = $(target);
    var basic = $target.find('input,select').hasClass('disabled');
    console.log(basic);
    //console.log($target);
    if (basic) {
        $("#add").addClass('disabled');
    } else {
        $("#add").removeClass('disabled');
    }
}
var detailscontainer = $('.notnull');

$(document).on('keyup, change, click', 'input:button,input.notnull,select.notnull', function (e) {
    e.preventDefault();

    toggleDisabledNavButton($(e.currentTarget).closest('.detailscontainer'));
});

detailscontainer.each(function (i, el) {
    toggleDisabledNavButton(el.closest('.detailscontainer'));
});

If you type last the class disabled is not removed from button but if you make selecting in option the last it will remove the class from button that is my question. Why is that?

Advertisement

Answer

remove the , in your selector:

$(document).on('keyup change', '.notnull', function (e) {

Fiddle

if you type last the class disabled is still not removed from button but if you make selecting in option the last it will remove the class from button that is my question. why is that

Because of the , again:-

$(document).on('keyup change click', 'input:button,input.notnull,select.notnull', function (e) {

Fiddle

Why

As the jQuery documentation:-

.on( events [, selector ] [, data ], handler )

events Type: String

One or more space-separated event types and optional namespaces, such as “click” or “keydown.myPlugin”.

User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement