Jquery .on() 'keyup' function does not work - javascript

I am trying to give event when pressing keyboard.
Don't know why this does not work. Any help?
$('input').on('keyup', '.aa', function() {
alert('hello');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="aa">

You have missed to prefix the dot before the class.
Also use a static container instead of input. Try $('body').on('keyup', '.aa', function(){
$('body').on('keyup', '.aa', function(){
alert('hello');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="aa">

Have you tried:
HTML:
<input type="text" class="aa">
jQuery:
$('.aa').keyup(function() {
alert('hello');
});
The keyup event above is just a shortcut for .on( "keyup", handler )

Another way of doing it is just put the class identified right in the selector
$('input.aa').on('keyup', function(){
alert('hello');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="aa">

Related

Eventlistener for input not working (javascript)

I am trying to call keyup event using EventListener for input tag but it is not working and I don't know why. below is my code
document.getElementById("ajax").addEventListener("keyup", function() {
alert("called");
});
<input type="text" id="ajax" list="json-datalist" placeholder="e.g. datalist">
<datalist id="json-datalist"></datalist>
Even if I tried JQuery but still it is not working but if I use
document.addEventListener(keyup,function(){
alert("called");
});)
then this is working but this is not what I want
Help will be appriciated
jQuery
$("#ajax").keyup(function() {
alert( "called" )
})
or
$("#ajax").on( "keyup", function() {
alert( "called" )
})
Your JavaScript Code is working
Try Following Using Jquery
$('#ajax').keypress(function(){
alert('called')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="ajax" list="json-datalist" placeholder="e.g. datalist">
<datalist id="json-datalist"></datalist>
You can Try Using jquery Keyup Event
$(document).on('keyup','#ajax',function(){
alert('Called');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="ajax" list="json-datalist" placeholder="e.g. datalist">
<datalist id="json-datalist"></datalist>

Remove HTML onchange code using jQuery

Below code snippet has HTML onchange attribute as well as jQuery's change event on the input text. I want only the jQuery's change event to be effective. I tried using both unbind and off without luck.
Could somebody please help?
$(document).ready(function(){
$("#testInput").unbind("change").bind("change",function(){
console.log("jQuery change");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="testInput" type="text" onchange="console.log('change');"/>
If you want to remove the "previous" onchange event, use
$("#testInput").removeAttr("onchange")
$(document).ready(function() {
$("#testInput").removeAttr("onchange")
$("#testInput").unbind("change").bind("change", function() {
console.log("jQuery change");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="testInput" type="text" onchange="console.log('change');" />
Just remove onchange attribute. removeAttr('onchange') will remove onchange attribute
$(document).ready(function(){
$("input").each(function(){
$(this).removeAttr('onchange');
});
$("input").bind("change",function(){
console.log("jQuery change");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="testInput" type="text" onchange="console.log('change');"/>
<input id="testInput2" type="text" onchange="console.log('change');"/>
you could set the onchange to null and add listener, like:
$(document).ready(function(){
//remove inline 'onchange' event by setting it to null
$("#testInput")[0].onchange = null;
$(document).on("change" "#testInput", function(){
console.log("jQuery change");
});
});
try this
$(document).ready(function(){
$(document).on('change','#testInput',function(){
console.log("jQuery change");
});
});

javascript onkeypress input text

I am learning Javascript.. Below code working only if my script tag below my input text element, but if i place code above input text tag, its not working. May I know why? Below is code:
<head>
</head>
<body>
<input type="text" id="name" >
<script type="text/javascript">
var txtId = document.getElementById('name');
txtId.addEventListener('keypress', function(e){
console.log('Pressed!')
})
</script>
</body>
Below code is same as above except that I am using function, inside which I am using same code as above. But in this case, my script tag is above input text tag, and its working. How it's working in this case? Below is the code:
<head>
<script type="text/javascript">
function keyPressListener(){
var txtId = document.getElementById('name');
txtId.addEventListener('keypress', function(e){
console.log('Pressed!')
})
}
</script>
</head>
<body>
<input type="text" id="name" onkeypress="keyPressListener()">
</body>
So, what exactly difference between above 2 codes?
When you are using the onkeypress attribute. It actually works the same way as the addEventListener. You just have to write a simple function and call it in onkeypress
<input type="text" id="name" onkeypress="keyPressed()">
<script>
function keyPressed(){
console.log('Key Pressed');
}
</script>
Why is not working to place above the input
-Because document was not ready .so you need body.onload event .see the body onload=start() it will apply the js function after body loaded
<body onload="start()">
<input type="text" id="name">
<script type="text/javascript">
function start() {
var txtId = document.getElementById('name');
txtId.addEventListener('keypress', function(e) {
console.log('Pressed!')
})
}
</script>
</body>
And the second one -you are using two function in a single event. So use with any one of the event
if use with inline keypress of keyPressListener() else use Dom event of the
keypress (addEventListener)
*Note:
Dont include the addEventListener() inside keyPressListener() .
If you use with addEventListener() remove the onkeypress event inline of the markup.
because both are same action .
<head>
<script type="text/javascript">
function keyPressListener() {
console.log('Pressed!')
}
</script>
</head>
<body>
<input type="text" id="name" onkeypress="keyPressListener()">
</body>
You can use addEventListener.
Or try this as your input:
Add a ; after keyPressListener():
<input type="text" id="name" onkeypress="keyPressListener();">
If that doesn't work try this:
<input type="text" id="name" onkeypress="keyPressListener(); return true;">
HTML5 knows that when you use an onkeypress attribute that it needs to call the JavaScript function when the key is pressed. You can basically put any functional JavaScript in the parameter for the onkeypress="(JavaScript goes here)" attribute.
You can also just grab the element from the DOM and then add the event listener to the element like so:
jQuery: $('#name').onkeypress( function() { //code goes here } );
Regular Js: document.getElementById('name').onkeypress( function() { //code goes here } );

jquery: Don't get why element selector work or don't work

I have an html document with the following element
<input type="text" style="width: 40px;" name="rate" id="rate" value="1" />
Now I want to use jQuery to run a function once this textfield is changed. But I seem not to understand how the selectors work. Because this example works:
<script>
// works
$(document).on('input', function() {
alert();
});
</script>
But of course it fires on all inputs that are interacted. So I only want a certain id to response:
<script>
// doesn't work
$(document).on('#rate', function() {
alert();
});
</script>
But it doesn't work. Neither does it with class or attributes ("input[name='rate']") nor with 'input#rate' instead of document.
$('input#rate').on(function() {
Why is that?
jQuery included in head is:
<script src="/assets/jquery-1.12.3.min.js"></script>
on() accepts the event name as the first argument.
As there is no event called #rate, the following will not work.
$(document).on('#rate', function() {
Use
$(document).on('keyup', '#rate', function() {
^^^^^^^ : Event name here
on should take event then selector like .on('keydown', '#rate'
Format like:
.on( events [, selector ] [, data ], handler )
so it would be
$(document).on('click', '#rate', function() {
^^^^^
alert();
});
More on Here
input in $(document).on('input', function() { is not a selector.
document is the selector, 'input' is the event type.
If you want to listen for the input event on a specific element, you can pass a selector as the second parameter to .on():
$(document).on('input', '#rate', function() {
// ^^^^^^^
...
});
or you can just select the specific element before binding the callback:
$('#rate').on('input', function () {
...
});
What you have now:
$(document).on('input', function() { } );
means
on every "input" event for any element do something
And if you want to do something only on particular element - pass this element as a selector:
$(document).on('input', "#rate", function() { } );
Here input is an event and #rate is an element selector.
Correct way to make this work is :
//on click
$(document).ready(function(){
$("#rate").click( function () {
alert('Awesome');
})});
for input box
<input type="text" style="width: 40px;" name="rate" id="rate" value="1" />
if you want to target class:
<input type="text" style="width: 40px;" name="rate" value="1" class="rate">
script will be
//on click
$(".rate").click( function () {
alert('Awesome');
})
for further info read :-
jQuery Selectors
I find that when I am confused why a jQuery function isn't properly working the way I expect to consult the API Documentation for jQuery for usage and examples. Specifically for .on() I would reference the documentation page for that function:
http://api.jquery.com/on/
Each event is going to give a different desired outcome. You are wanting to fire off some code when the input is changed. The events used are based on vanilla JavaScript events so in this case your options would include on change, keyup, or keydown.
To decide which event to use for this, to me, it usually comes down to one thing: Does my code need to check the input before it shows in the text field?
You can see in this code how to use each event that I mentioned.
// Using on-change
// You'll notice that this only 'fires off' when your cursor LEAVES the input field
$("#rate1").on("change",function() { $(this).next().html("<= Changed"); });
// Using on-keyup
// You'll notice that this only 'fires off' when the key you pressed is released, not when it is pressed
$("#rate2").on("keyup",function() { $(this).next().html("<= Changed"); });
// Using on-keydown
// You'll notice that this only 'fires off' when a key is pressed
$("#rate3").on("keydown",function() { $(this).next().html("<= Changed"); });
.label { color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<input type="text" style="width: 40px;" class="change" name="rate" id="rate1" value="1" />
<span class="label"></span><br />
<input type="text" style="width: 40px;" class="keyup" name="rate" id="rate2" value="1" />
<span class="label"></span><br />
<input type="text" style="width: 40px;" class="keydown" name="rate" id="rate3" value="1" />
<span class="label"></span><br />
Something like keydown is best used when you're trying to see what key they entered before it goes into the input. I usually use this to see if the enter key was pressed.
Hope this helps!

When we assign value jQuery event call?

I have two text fields:
<input type="text" id="ex_1" class="update">
<input type="text" id="ex_2" class="update">
I want when I assign value:
jQuery("#ex_1").val(12);
jQuery event called like below but not on the change but on assign value:
jQuery(".update").change();
jQuery(".update").live('keyup change', function()
{
alert(jQuery(this).val());
}
On the assignment of value jQuery event called?
you can use like this
$(".update").keyup(function () {
$(this).trigger("change");
});
$(".update").change(function () {
alert("change");
});
DEMO
Is this what you are looking for>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="../JS/jQuery.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("input").change(function () {
alert('in'); // do you stuff here
});
$("#Button1").click(function () {
$("input").val(12);
$("input").trigger("change");
});
});
</script>
</head>
<body>
<input type="text" id="ex_1" class="update">
<input type="text" id="ex_2" class="update">
<input id="Button1" type="button" value="button" />
</div>
</body>
</html>
.trigger("change") will invoke the elements change function.
In the code above, on click of the button the val will be changed and also the change function will be triggered.
Syntax :
$("selector_of_element").trigger("event_function");
The change event fires only if the value is changed by the user interaction.
If you want to fire event then you have manually trigger event. So use .change(); or.trigger('change');
If you're programatically assigning value, you'll have to manually trigger the change event. Check this answer.
Try this:
jQuery('#ex_1').val(12).change();

Categories

Resources