CODEWITHSUNDEEP
javascriptjquery
David542
David542

Reputation: 110502

Combining two event handlers into one (jquery)

I have extracted a function from two event handlers, however I was wondering if the event handlers themselves could be combined:

// when to hide/show the Submit link (select is changed)
$('.season select').on('change', function() {
    var TVContainer = $(this).parents('.submission');
    getTVData(TVContainer);
});

// when to hide/show the Submit link (validate on input changed)
$('.season input').on('keyup', function() {
    var TVContainer = $(this).parents('.submission');
    getTVData(TVContainer);
});

Upvotes: 0

Views: 51

Answers (3)

amazedinc
amazedinc

Reputation: 418

You can combine your selectors and combine your events - especially since you can't type into a select. Give it a try.. you'll potentially want to handle for change events being called after exit from input.

$('.season select, .season input').on('change keyup', function() {
    alert("change or keyup called");
});

fiddle: http://jsfiddle.net/Lbztf7eh/

Upvotes: 0

connexo
connexo

Reputation: 56813

Just make the handler a separate function. To make sure you get the right this in that function, use bind(this).

function handler() {
    var TVContainer = $(this).parents('.submission');
    getTVData(TVContainer);
}

// when to hide/show the Submit link (select is changed)
$('.season select').on('change', handler.bind(this));

// when to hide/show the Submit link (validate on input changed)
$('.season input').on('keyup', handler.bind(this));

Upvotes: 2

Ariel
Ariel

Reputation: 1436

You could extract your handlers to another function:

function handler () {
    var TVContainer = $(this).parents('.submission');
    getTVData(TVContainer);
}

$('.season select').on('change', handler);

// when to hide/show the Submit link (validate on input changed)
$('.season input').on('keyup', handler);

Upvotes: 3

Related Questions