jQuery 'if .change() or .keyup()'
JavascriptJqueryFunctionJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
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!
Solution 2 - Javascript
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
bodyof the document, so regardless of what elements are added, moved, removed and re-added, all descendants ofbodymatching 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:inputand 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.
Solution 3 - Javascript
Do this.
$(function(){
var myFunction = function()
{
alert("myFunction called");
}
jQuery(':input').change(myFunction).keyup(myFunction);
});
Solution 4 - Javascript
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!' );
}
Solution 5 - Javascript
That's not how events work. Instead, you give them a function to be called when they happen.
$("input").change(function() {
alert("Something happened!");
});
Solution 6 - Javascript
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.
Solution 7 - Javascript
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 );
}
})
Solution 8 - Javascript
keyup event input jquery
$(document).ready(function(){
$("#tutsmake").keydown(function(){
$("#tutsmake").css("background-color", "green");
});
$("#tutsmake").keyup(function(){
$("#tutsmake").css("background-color", "yellow");
});
});
<!DOCTYPE html>
<html>
<title> jQuery keyup Event Example </title>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
Fill the Input Box: <input type="text" id="tutsmake">
</body>
</html>