jQuery 'if .change() or .keyup()'

Question

Using jQuery i would like to run a function when either .change() or .keyup() are raised.

Something like this.

if ( jQuery(':input').change() || jQuery(':input').keyup() )
{
    alert( 'something happened!' );
}

EDIT

Sorry i forgot to mention. Both .change() and .keyup() need some of the variables to be in-scope.

`need some of the variables to be in-scope` do you mean variables from the event or variables you're using when you're registering these events handlers? You get the event variables in the event parameter (usually named `e`), else you might need to keep them at the window level or data on the element until the events are raised, or look at closures. — StuperUser, Oct 13 '11 at 16:48

score 233 · Accepted Answer · edited Dec 24 '22 at 09:01

233

You can bind to multiple events by separating them with a space:

$(":input").on("keyup change", function(e) {
    // do stuff!
})

docs here.

edited Dec 24 '22 at 09:01

starball

20,030
7
43
238

answered Oct 13 '11 at 16:31

keeganwatkins

3,636
1
14
12

9

Be aware that the internal function is called twice if the value changes on keyup (so, nearly always). See @Joshua Burns reply to handle it. – T30 Nov 04 '15 at 10:41
but it executing 2 time one for "keyup" and one for "change"... why? – Rahul Pawar Jul 26 '18 at 09:40
It's usually better to listen for the `input` event instead of `keyup` with `$(":input").on("input", function(e) {})` because `keyup` only fires after you stop holding down the key on your keyboard, so it feels a bit slower than firing the event as soon as you see the letter but before you've let go of the key. – Boris Verkhovskiy Jul 11 '22 at 11:50

Joshua Burns · Answer 2 · 2016-02-10T16:44:05.667

If you're ever dynamically generating page content or loading content through AJAX, the following example is really the way you should go:

It prevents double binding in the case where the script is loaded more than once, such as in an AJAX request.
The bind lives on the body of the document, so regardless of what elements are added, moved, removed and re-added, all descendants of body matching the selector specified will retain proper binding.

The Code:

// Define the element we wish to bind to.
var bind_to = ':input';

// Prevent double-binding.
$(document.body).off('change', bind_to);

// Bind the event to all body descendants matching the "bind_to" selector.
$(document.body).on('change keyup', bind_to, function(event) {
    alert('something happened!');
});

Please notice! I'm making use of $.on() and $.off() rather than other methods for several reasons:

$.live() and $.die() are deprecated and have been omitted from more recent versions of jQuery.
I'd either need to define a separate function (therefore cluttering up the global scope,) and pass the function to both $.change() and $.keyup() separately, or pass the same function declaration to each function called; Duplicating logic... Which is absolutely unacceptable.
If elements are ever added to the DOM, $.bind() does not dynamically bind to elements as they are created. Therefore if you bind to :input and then add an input to the DOM, that bind method is not attached to the new input. You'd then need to explicitly un-bind and then re-bind to all elements in the DOM (otherwise you'll end up with binds being duplicated). This process would need to be repeated each time an input was added to the DOM.

@VarunDas, `var bind_to = ':input';` creates a variable called `bind_to` which is a selector to grab all input types, such as `input`, `textarea` and `button`. — Joshua Burns, Feb 10 '16 at 16:43
If I want for specific elements: `var bind_to = '#myInput';` The ajax call executes twice anyway. Why??? — Pathros, Apr 28 '17 at 19:36
@Pathros I'd need to see an example, this thread isn't the place. Shoot me a message on LinkedIn or something — Joshua Burns, May 10 '17 at 03:13

score 5 · Answer 3 · answered Oct 13 '11 at 16:30

5

Do this.

$(function(){
    var myFunction = function()
    {
        alert("myFunction called");
    }

    jQuery(':input').change(myFunction).keyup(myFunction);
});

answered Oct 13 '11 at 16:30

brenjt

15,997
13
77
118

`change()` and `keyup()` return the wrapped set, so you can chain that. – StuperUser Oct 13 '11 at 16:32
You could, couldn't you. Thanks. – brenjt Oct 13 '11 at 16:33
the chain also eliminates the second query through the DOM. – keeganwatkins Oct 13 '11 at 16:34

score 2 · Answer 4 · answered Oct 13 '11 at 16:31

2

You could subscribe for the change and keyup events:

$(function() {
    $(':input').change(myFunction).keyup(myFunction);
});

where myFunction is the function you would like executed:

function myFunction() {
    alert( 'something happened!' );
}

answered Oct 13 '11 at 16:31

Darin Dimitrov

1,023,142
271
3,287
2,928

score 1 · Answer 5 · answered Jun 03 '21 at 06:29

Well here is how I solved it using Jquery

$("#c_debit").on("keyup change", function(e) {
 let debitValue = $("#c_debit").val();
 if(debitValue != 0)
 {
  $( "#c_credit" ).prop( "disabled", true );
 }
 else{
  $( "#c_credit" ).prop( "disabled", false );
 }
})

score 1 · Answer 6 · answered Oct 13 '11 at 16:31

1

That's not how events work. Instead, you give them a function to be called when they happen.

$("input").change(function() {
    alert("Something happened!");
});

answered Oct 13 '11 at 16:31

Alex Turpin

46,743
23
113
145

score 1 · Answer 7 · answered Oct 13 '11 at 16:31

Write a single function and call it for both of them.

function yourHandler(e){
    alert( 'something happened!' );        
}
jQuery(':input').change(yourHandler).keyup(yourHandler);

The change() and keyup() event registration functions return the original set, so they can be chained.

jQuery 'if .change() or .keyup()'

7 Answers7

Linked