<input id = "textboxid" type="text" onkeyup="invoke();" />
<script>
function invoke() {
var enteredData = $('#textboxid').val();
alert(enteredData);
}
</script>
This is working fine but i want to do it without using onkey attribute and only jquery
Try this
$(document).ready(function(){
$("#textboxid").keyup(function() {
alert($(this).val());
});
});
Hope it will help
Use the keyup jQuery event:
HTML
<input id = "textboxid" type="text" />
Javascript
$(function() {
$("#textboxid").on("keyup", function() {
alert($(this).val());
});
});
Check the JS Fiddle
http://jsfiddle.net/juGyc/
$(function() {
$("#textboxid").on("keyup", function() {
alert($(this).val());
});
});
can you please check this demo Demo
$(document).ready(function(){
$("#textboxid").keyup(function() {
alert($(this).val());
});
});
KeyUp : Bind an event handler to the "keyup" JavaScript event, or trigger that event on an element.
This will work for on Change or Blur
$("#textboxid").change(function(){
alert($(this).val());
});
blur Event
You can do this using jQuery's .bind() method. Check out the jsFiddle.
$(document).ready(function(){
$("#myTextBox").bind("change paste keyup", function() {
alert($(this).val());
});
});
OR
You can also bind events using jquery .On() -
$(document).ready(function(){
$("#textboxid").on("change paste keyup", function() {
alert($(this).val());
});
});
Try This
OR
Also bind the .change() event-
$(document).ready(function(){
$("#textboxid").change(function() {
alert($(this).val());
});
});
Related
I want to call a function in jquery when mouse click or key press is occure
one way is to write same code twice for this both event but it is not proper way
can any one tell me how it is possible?
write a function
function Process(){
//Put all your logic
}
call the function in all the event
$("some element selector").on("click keypress",function() {
Process();
});
or any other click event.
If you want to register both handlers to the same element then you can use .on() to register handler for multiple events
$('myelementselector').on('click keypress', function () {
//mycode
})
Use the on method.
$("some element selector").on("click keypress",function() {
//do something
});
yes you can use like
<input type="text" />
$(document).on("click mouseenter","input",function(){});
Try this:-
$(element).on('click keypress keydown', function() {
});
Write only one function & call it on both event.
$( "#target" ).keypress(function() {
funABC();
});
$( "#target" ).click(function() {
funABC();
});
function funABC(){alert("DONE");}
One more shortcut :
$( "#target" ).click(function() {
$( "#target" ).keypress();
});
$( "#target" ).keypress(function() {
funABC();
});
You also use :
$( "input" ).on('keypress mouseup',function() {
alert('done');
});
or
$( "input" ).on('keypress mouseup',fun);
I'am trying to change the class of some input elements during some mouse events but only mouseover and mouseout events are working, what can be the reason of this problem ?
$(document).ready(function(){
$('.registerFormElements').mouseover(function(){
this.className='bright';
});
$('.registerFormElements').mouseout(function(){
this.className='';
});
$('.registerFormElements').focus(function(){
this.className='bright';
});
$('.registerFormElements').blur(function(){
this.className='';
});
});
Try to use the code :
$(this).attr('class', '');
or
$(this).attr('class', 'myClass');
and you can too
$(this).addClass('myClass');
$(this).removeClass('myClass');
$(document).ready(function(){
var classname= 'bright';
/*Can create a variable so that you can use it later. By creating variable we can avoid searching in entire dom again*/
var formElement = $(".registerFormElements");
/*Used chaining*/
formElement.on( "mouseover focus", function() {
$(this).addClass(classname);
})
.on( "mouseout blur", function() {
$(this).removeClass(classname);
});
});
You can use addClass() and removeClass()
$(this).removeClass(); //It clears all classes
$(this).addClass('MyClass');
you could bind many events and look at the event.type and toggle the class you want:
$(document).ready(function(){
$('.registerFormElements').on('focus mouseenter mouseleave blur', function(e) {
var element = $(this);
var shouldHaveBright = e.type === 'focus' || e.type === 'mouseenter';
var hasFocus = element.is(':focus');
element.toggleClass('bright', shouldHaveBright || hasFocus);
});
});
It seems to be working for me. Check your class names don't have typos in them. Also, by focus do you mean tab to the input? This is what triggers focus events.
See my fiddle:
http://jsfiddle.net/AdqzA/
$('.registerFormElements').mouseover(function(){
this.className='bright';
});
$('.registerFormElements').mouseout(function(){
this.className='';
});
$('.registerFormElements').focus(function(){
this.className='bright';
});
$('.registerFormElements').blur(function(){
this.className='';
});
Your Jqueries might be conflicting :-
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('.registerFormElements').mouseover(function(){
this.className='bright';
});
$j('.registerFormElements').mouseout(function(){
this.className='';
});
$j('.registerFormElements').focus(function(){
this.className='bright';
});
$j('.registerFormElements').blur(function(){
this.className='';
});
});
My jQuery will not activate on click as it should. I am targeting all class a divs
http://jsfiddle.net/clarinetking/BbSMW/6/ (JSFiddle)
$(document).ready(function () {
$(".a").click(function () {
$(this).fadeOut(default:400);
});
});
Your fiddle does not have jQuery in it and you forgot quotes:
$(document).ready(function(){
$('div').mouseover(function(){
$(this).fadeOut('slow');
});
});
New fiddle: http://jsfiddle.net/qwertynl/KMjG6/
List Checkbox change event not fire in jquery.
List Creation:
$("#my_list").append("<li><input type='checkbox' class='my_list_checkbox' value='"+id+"' name='"+name+"'/><img class=\""+icon_class+"\" /><label style='padding-left:25px'>"+name+"</label></li>");
I tried following events,but no one works,how solve this issue?
$(".my_list_checkbox").on("change",function(){
console.log("clicked");
});
$(".my_list_checkbox").click(function(){
console.log("clicked");
});
$("#my_list .my_list_checkbox").on("change",function(){
console.log("clicked");
});
$("#my_list .my_list_checkbox").click(function(){
console.log("clicked");
});
$("#my_list li").delegate("input[type:checkbox]","change",function(){
console.log("clicked");
});
$("#my_list > li > input[type=checkbox]").change(function(){
console.log("clicked");
});
it should be
$("#my_list").on('change', "input[type=checkbox]",function(){
console.log("clicked");
});
or
$("#my_list").on('change', ".my_list_checkbox",function(){
console.log("clicked");
});
Try this:
$('.my_list_checkbox').change(function(){
console.log("clicked");
});
If you wish to go through the parent element, try
$('#my_list").find('.my_list_checkbox').change(function(){
console.log("clicked");
});
In this scenario you can also try using .focusout() function if .change isn't working your way...
Use event delegation, As #my_list is parent of .my_list_checkbox and when ever element with class .my_list_checkbox is added to #my_list event is binding automatically.
$("#my_list").on("change", ".my_list_checkbox" ,function(){
console.log("clicked");
});
Try this
$("#my_list .my_list_checkbox").click(function(){
console.log("clicked");
});
or
$("#my_list").on('click', ".my_list_checkbox",function(){
console.log("clicked");
});
In situations where multiple event handlers are operating on a single element and action, how can I force only one of the events to fire? JSFiddle.
$("#buttons").on("click", "button", function(){
// only do this if the event below isn't fired
});
$("#buttons").on("click", "button.red", function(){
// if this one happens, don't do the above one
});
For a more general solution, event.stopImmediatePropagation() will prevent the event from triggering any more handlers. For handlers bound to the same element, the order they are bound seems to matter. You could also bind the one that you conditionally don't want to fire to an element higher in the DOM and use e.stopPropagation():
$(document).ready(function(){
$("#buttons").on("click", ".red", function(e){
e.stopImmediatePropagation();
$(this).css("color","red");
});
$("#buttons").on("click", "button", function(){
$(this).css("background","blue");
});
});
http://jsfiddle.net/Ef5p7/
Here's how you could use stopPropagation() instead:
<div id="buttonsOuter">
<div id="buttons">
<button>turn blue</button>
<button class="red">only turn text red</button>
<button>turn blue</button>
<button>turn blue</button>
<button>turn blue</button>
</div>
</div>
...
$(document).ready(function () {
$("#buttons").on("click", ".red", function (e) {
e.stopPropagation();
$(this).css("color", "red");
});
$("#buttonsOuter").on("click", "button", function () {
$(this).css("background", "blue");
});
});
http://jsfiddle.net/CwUz3/
Change the first event handler to:
$("#buttons").on("click", "button", function(){
$(this).not('.red').css("background","blue");
});
jsFiddle example
$("#buttons").on("click", "button, button.red", function(){
// if this one happens, don't do the above one
});
Try using :not() http://api.jquery.com/not-selector/
$(document).ready(function(){
$("#buttons").on("click", "button:not(.red)", function(){
$(this).css("background","blue");
});
$("#buttons").on("click", "button.red", function(){
$(this).css("color","red");
});
});
Here's the working fiddle:
http://jsfiddle.net/SpFKp/4/
Try this,the functions will be called but you can add condition to not run the code:
var functionCalledFlag =false;
$("#buttons").on("click", "button", function(){
if(!functionCalledFlag ){
functionCalledFlag =true;
// only do this if the event below isn't fired
}else{
functionCalledFlag =false;
}
});
$("#buttons").on("click", "button.red", function(){
if(!functionCalledFlag ){
// only do this if the event above isn't fired
functionCalledFlag =true;
}else{
functionCalledFlag =false;
}
});