Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 201
cnotethegr8 Avatar asked Oct 13 '11 16:10

cnotethegr8


People also ask

What is Keyup and Keydown in jQuery?

jQuery keyup() Method The order of events related to the keyup event: keydown - The key is on its way down. keypress - The key is pressed down. keyup - The key is released.

What is Keyup event in jQuery?

The keyup event is sent to an element when the user releases a key on the keyboard. It can be attached to any element, but the event is only sent to the element that has the focus.

Why is Keyup not working?

keyup / keydown seem to only work on elements that are present at document. ready . If you are triggering your event from elements that were altered or injected post pageload, these events will not fire.

What is Keyup and Keydown?

The keydown and keyup events provide a code indicating which key is pressed, while keypress indicates which character was entered. For example, a lowercase "a" will be reported as 65 by keydown and keyup , but as 97 by keypress . An uppercase "A" is reported as 65 by all events.


2 Answers

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

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

docs here.

hope that helps. cheers!

like image 192
keeganwatkins Avatar answered Oct 13 '22 06:10

keeganwatkins


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

  1. It prevents double binding in the case where the script is loaded more than once, such as in an AJAX request.
  2. 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:

  1. $.live() and $.die() are deprecated and have been omitted from more recent versions of jQuery.
  2. 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.
  3. 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.
like image 31
Joshua Burns Avatar answered Oct 13 '22 06:10

Joshua Burns