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);
Related
I have a few on click events who actually are doing the same thing. Someone told me I should use a case switch for this so I can reduce my code. But I don't know how to do that in combination with a on click event.
$( "#wishlist_top" ).on( "click", function() {
window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
hj('tagRecording', ['Klikt op "wishlist" in menu']);
});
$( ".wishlist" ).on( "click", function() {
window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
hj('tagRecording', ['Klikt op "plaats op wishlist"']);
});
$( ".product_size" ).on( "click", function() {
window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
hj('tagRecording', ['Klikt op "maat advies"']);
});
$( ".product_stock" ).on( "click", function() {
window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
hj('tagRecording', ['Klikt op "maat niet beschikbaar?"']);
});
if ( $('*').hasClass('404') ) {
window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
hj('tagRecording', ['Klant is op een 404 pagina gekomen']);
}
Thank you!
While you can use a switch/case for this, it might not be the best idea. You still need to listen for click events on each class/ID, so I'd make a function and call that with the specific string.
Using your code from above, you can make a function like so:
function tagRecording(value) {
window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
hj('tagRecording', [value]);
}
Now just use a click listener like so:
$( "#wishlist_top" ).on( "click",
function() { tagRecording('Klikt op "wishlist" in menu'); } );
So next time you want to change your code, you just change the tagRecording function (you can rename it however you like).
Another option here is to use data attributes in your markup. Add the message you want to pass to a data-text attribute in each of your elements -
<a href="#" class="product_stock" data-text='Klikt op "wishlist" in menu'>Foo</a>
And then you can set up one JS handler, which grabs the text from your data attribute:
$( ".product_stock" ).on( "click", function() {
window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
hj('tagRecording', $(this).data("text"));
});
Of course this only works if you have control over the creation of the markup.
I'm trying to select a div for a click event but not the inputs within said div. I thought this would do it but it does not work. here is a demo. Thank you
html
<div id = "test"><input></div>
js
$('#test:not(input)').click(function(){
alert();
});
You could check to see if the clicked element is an input element using !$(e.target).is('input')
Updated Example
$('#test').on('click', function (e) {
var $target = $(e.target);
if (!$target.is('input')) {
alert('clicked');
}
});
When you click on the input, the click event bubbles to the div above it.
You can stop this by calling stopPropagation or stopImmediatePropagation on the event object.
http://jsfiddle.net/t66f06oL/1/
$( '#test' ).on( 'click', function() {
alert();
} );
$( '#test' ).on( 'click', 'input', function( e ) {
e.stopImmediatePropagation();
} );
When you click on the input control your click event is actually caught by the parent div. You can fix this by changing your code to this:
$('#test:not(input)').click(function(){
alert();
});
$('#test').find('input').click(function(e){
e.stopPropagation();
});
I need to track if an element and if ye which element is changed in a form.
The $( "input" ).change(function () { handler is not firing in Kendo UI. My code is
$( "input" ).change(function () {
alert('aaaa');
event.preventDefault();
});
what am I doing wrong? Or is there a more proper way in kendo?
I think you are looking for keyup event.
$("input").keyup(function () {
alert('aaaa');
});
Demo
Change event for input only fires when focus is lost after changing value. See this
Give your input (for example #target) and them:
jQuery( ".target" ).change(function() {
alert( "aaaaa" );
});
I have a <div id="myContainer"></div> .
I also have a button: <input type="button" value="Send" id="sendButton">
While clicking at the button: it replaces the DIV with another:
$( "#sendButton" ).click(function() {
$( "#myContainer" ).replaceWith("<div id='calc'><input type=\"text\" id=\"screen\" value=0><button id=\"add\">+</button><button id=\"mul\">*</button><button id=\"settings\">settings</button><button id=\"clear\">clear</button></div>");
});
I want to activate another function after click on a new button I've just put (<button id=\"mul\">*</button>):
$( "#mul" ).click(function() {
console.log(' mul clicked!');
});
Which doesn't work, the fact that I'm waiting for a click on a div that just created have something to do with it?
You need to attach event to #mul. Because it is appended dynamically, $("#mul").click() will not work.
.on() attaches event handlers to the currently selected set of elements.
Try:
$("body").on("click","#mul",function(){
console.log("mul clicked!");
});
More information here.
When you call $( "#mul" ).click(), you're attaching an event handler to #mul as it exists at that point. To fix this, just call $( "#mul" ).click() after you create #mul.
$( "#sendButton" ).click(function() {
$( "#myContainer" ).replaceWith("<div id='calc'><input type=\"text\" id=\"screen\" value=0><button id=\"add\">+</button><button id=\"mul\">*</button><button id=\"settings\">settings</button><button id=\"clear\">clear</button></div>");
$( "#mul" ).click(function() {
console.log( ' mul clicked!' );
});
});
You could also use jQuery's .on method with the optional selector, called a delegated event handler according to the documentation. Take a look at the API for jQuery if that's what you want: jQuery API documentation. The basic usage would be something like
$( document ).on( "click", "#mul", function( ) {
console.log( ' mul clicked!' );
});
use this
$(document).on("click","#mul",function() {
instead of
$( "#mul" ).click(function() {
or
$( "#sendButton" ).click(function() {
$( "#myContainer" ).replaceWith("<div id='calc'><input type=\"text\" id=\"screen\" value=0><button id=\"add\">+</button><button id=\"mul\">*</button><button id=\"settings\">settings</button><button id=\"clear\">clear</button></div>");
$( "#mul" ).click(function() {
console.log(' mul clicked!');
});
});
$( "#sendButton" ).click(function() {
$( "#myContainer" ).replaceWith("<div id='calc'><input type=\"text\" id=\"screen\" value=0><button id=\"add\">+</button><button id=\"mul\">*</button><button id=\"settings\">settings</button><button id=\"clear\">clear</button></div>");
// add listener here
$( "#mul" ).click(function() {
console.log(' mul clicked!');
});
$( "#mul" ).trigger("click"); // add this to your code
});
http://api.jquery.com/trigger/ see detail of trigger()
http://jsfiddle.net/tnnj5/ here is a demo
you must add listener after the new content has insert into dom
You can use .live() method to bind event with dynamically added content.
Try this:
$("#mul").live("click", function() {
console.log(' mul clicked!');
});
Try in fiddle
You can also use jquery .on(), But here you add dynamic content. So you need to use event delegation to register the event handler like:
$(document).on("click","body #mul", function() {
console.log(' mul clicked!');
});
Try in jsfiddle with on
I have index.php and will load index-edit.php with a button click into index.php in a <div class="edit-wrapper"> </div>. I have some input in index.php and some input in index-edit.php. I want to add .active class to them on focus out, but jQuery does not add .active class to the ones in index-edit.php, but rest of them (which are not index-edit.php) works fine.
Look at my script.js.
$( input ).focusout( function() {
$( this ).addClass('active');
});
$( document ).on( "click", ".btn", function() {
$('.edit-wrapper').load('index-edit.php');
});
Since the inputs are added dynamically, you need to use event delegation to register the event handler
// New way (jQuery 1.7+) - .on(events, selector, handler)
$(document).on('focusout', 'input', function(event) {
$(this).addClass('active');
});
Where are you loading script.js ? Try this :
$(document).ready(function(){
$( input ).focusout( function() {
$( this ).addClass('active');
});
$( document ).on( "click", ".btn", function() {
$('.edit-wrapper').load('index-edit.php');
});
});
need to use event delegation
$( document).on('focusout', 'input ', function() {
$( this ).addClass('active');
});