Develop Reference

I have two input elements with class "inputWithLimit". Why would both be firing simultaneously and logging '0' as val().length?

$(document).ready(function() {
$(".inputWithLimit").each(() => {
var inp = this;
inp.addEventListener("input",
function (event){
console.log($(inp).val().length);
});
});
})
I've also tried "keyup" and "change" as event handlers, and in both other cases, jquery is doing a strange thing with assigning these listeners. Thanks.

If you are using jQuery then there is no need to loop through each element and add an event listener. An example which logs the value of each input when you input something.
$(document).ready(function() {
$(".inputWithLimit").on('input',function() {
console.log(this.value);
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="inputWithLimit">
<input class="inputWithLimit">

The problem is your arrow function. When using arrow function, then you can't use `this'
$(".inputWithLimit").on("input", function() {
console.log($(this).val().length);
});
I've also made your code shorter.
Demo
$(document).ready(function() {
$(".inputWithLimit").on("input", function() {
console.log($(this).val().length);
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="inputWithLimit" />

Call keypress event on button click?

I have below jquery code which is execute on keypress but I would like to execute same on button click. Please help me.
$('#itemselected').live('keypress', function() {
//some code which using $(this) also.
}

var myFunction = function(event){
console.debug(event);
//do your stuff here
};
$('#itemselected').on('keypress', function(event) {
myFunction(event);
}
$('#itemselected').on('click', function(event) {
myFunction(event);
}

Try to trigger the keypress on click
$('button').click(function() {
$('#itemselected').trigger('keypress');
});

I think you can just add 'click' to the list of event types like so:
$('#itemselected').on('keypress click', function() {
//some code which using $(this) also.
});

Javascript - get value from textbox at every keypress

I have a textbox and I want to use the data in it every time something is entered; letter by letter.
What is happening is that when a value is entered, the Javascript is being executed before the value is actually put into the textbox, meaning that it always lags one character behind.
$(document).ready(
function() {
$('#test').keypress(
function() {
var value = document.getElementById('test').value;
alert(value);
});
})
<input id="test" type="text" />
Here's whats happening:
input alert
w ""
e "w"
a "we"
l "wea"
t "weal"
h "wealt"
Whereas I want it to happen dynamically; i.e. when I enter "w" I want the alert to contain "w" immediately after.

keypress happens before the change, yes. keyup happens after. Listen to that instead.

use keyup
$(document).ready(
function() {
$('#test').keyup(
function() {
var value = document.getElementById('test').value;
alert(value);
});
})

You should try keyup event, because keypress happens before symbol is being input in a textbox

Use keyup to read the valid after something has been entered. Here's how to do it with jQuery:
$(document).ready(function() {
$('#test').keyup(function() {
alert($(this).val());
});
});
Demo

Use the keyup event instead -:
$('#test').keyup(
function() {
var value = document.getElementById('test').value;
alert(value);
});

Use keyup instead, take a look at this:
http://jsfiddle.net/gEBc4/1/

use keyup instead
that will work
$(document).ready(
function() {
$('#test').keyup(
function() {
var value = document.getElementById('test').value;
alert(value);
});
})

Try using 'keyup' event instead of 'keypress'.
Change to:
$(document).ready(
function() {
$('#test').keyup(
function() {
var value = document.getElementById('test').value;
alert(value);
});
});
Working plunk.

How to attach different events on multiple selectors through .on function in jquery?

I have two elements as following on my page:
<input type="text" id="textfield"/>
<input type="button" id="button" value="CLICK"/>
And in my Javascript code I have the following:
$(document).ready(function() {
$("#button,#textfield").on("click change",function() {
// This won't work because I don't need click function
// to be worked on the text field
});
});
What I need is click function to be worked on button and need only change function to be worked on text field. How do I do this?

If you want the same code to be called for different events on different objects, you can put the event handling code into a common function and then specify the exact conditions in each event registration:
$(document).ready(function(){
function myEventHandler(e) {
// your code here
}
$("#button").on("click", myEventHandler);
$("#textfield").on("change", myEventHandler);
});

Split your code into:
$(document).ready(function(){
$("#button").on("click",function(){
});
$("#textfield").on("change",function(){
});
});
Why did you put them together?

Seperate to two function:
$("#button").on("click change",function(){
// Handle button
});
$("#textfield").on("change",function(){
// Handle Textfield
});

Assign them separately:
$('#button').click(function(){
//button code here
});
$('#textfield').change(function(){
// text field code here
});
If you want them to do the same thing, create a separate function:
function doSomething() {
// text field and button code here
}
and then reference that function instead:
.click(doSomething);
...
.change(doSomething);
Also, i should tell you, "change" does not do what you would think for a text field. It does not fire while typing, only when you "blur" the text field after updating it. It's more for checkboxes and things of that nature. I would use .keyup()

Try:
$(document).ready(function(){
$("#textfield").on("change",function(e){
my_function(e);
});
$("#button").on("click",function(e){
my_function(e);
});
function my_function(e){
// e = event...
// your actions...
}
});

Try using like this if you want only one .on function
$("#button,#textfield").on("click change",function(){
if ($(this).attr('type') == "text"){
alert("Do your change function");
}
else if ($(this).attr('type') == "button"){
alert("Do your click function");
}
});
See Demo

how to capture change event in input with jquery?

$('input').change(function(){
alert($(this).val());
});
$('input').val(1);
This dont work. I need capture the change input with JavaScript :-s
Thanks.

Programmatic changes to <input> elements don't cause events. Only user interaction does.
You can do this however:
$('input').val(1).trigger('change');

You have to put those functions inside the "Ready" function. see the fiddle: http://jsfiddle.net/SfjJQ/1/
$(function() {
$('input').change(function() {
alert($(this).val());
});
$('input').val(1);
$('input').trigger('change');
});​
keep in mind that your:
$('input').val(1);
initializes the input to have a value of 1.
Of course you could also do this:
$(function() {
$('input')
.change(function() {
alert($(this).val());
})
.val(1)
.trigger('change');
});​

As others have mentioned, .val() does not trigger any events; however, you could add a wrapper function to jQuery that will change the value and trigger the event if wanted:
$( function () {
//-- new jQuery function
$.fn.changeVal = function () {
$.fn.val.apply( this, arguments );
$( this ).trigger( 'change' );
};
//-- your updated code
$('input').change(function(){
alert($(this).val());
});
$('input').changeVal(1);
} );​
http://jsfiddle.net/bA3V2/