How can I bind 2 different events when the document loads?
I have a text field and a button. The function should be executed either when the button is clicked:
$(document).ready(function() {
$("button").click(function() {
myFunction();
});
});
or when Enter is pressed:
$("#id_of_textbox").keyup(function(event){
if(event.keyCode == 13){
myFunction();
}
});
But how to combine both events?
Did you want this:
$(document).ready(function() {
$("button").click(function() {
myFunction();
});
$("#id_of_textbox").keyup(function(event){
if(event.keyCode == 13){
myFunction();
}
});
});
You can bind your function to as many events as needed, here's one way...
$(document).ready(function() {
$("button").click(myFunction);
$("#id_of_textbox").keyup(myFunction);
});
function myFunction(event) {
if ((event.type === 'keyup') && (event.keyCode !== 13)) {
return;
}
// process event here
}
Related
As I want to unbind(off) the events I wrapped the code inside a function but as I need to see which key is pressed I need to get the event of the event(not sure how this is called.
// normal example
$('body').on('keydown',function( event ){
if(event.keyCode == 37){
// do something
}
});
// my example
function keyDownHandler() {
if(event.keyCode == 39) {
// does not work
}
}
$('body').on('keydown', keyDownHandler);
You need to get the event object, you can get it as callback function argument
function keyDownHandler(event) {
// set it here ----^^^^^^---
if(event.keyCode == 39) {
// works now
}
}
$('body').on('keydown', keyDownHandler);
$(document).ready(function () {
//1st way
$('body').on('keydown', function(event){
keyDownHandler(event);
});
//2nd way ,same as first but shorter use it for send event only
$('body').on('keydown', keyDownHandler);
//3rd way ,this way to send more data
$('body').on('keydown', {example:'hello world'},keyDownHandler2);
});
function keyDownHandler(event) {
console.log(event.keyCode);
}
function keyDownHandler2(event) {
console.log(event.keyCode);
console.log(event.data.example);
}
How to unbind the beforeunload event from all elements of the html body. Kindly tell me , is there any way to unbind beforeunload event from every javascript function call . Please help me , I am stuck badly on this.
I am using the below code :
var j$ = jQuery.noConflict();
j$(document).ready(function() {
jQuery(window).bind("onbeforeunload", function() {
return confirm("do you want to exit?", "true");
});
jQuery('a').on('click', function() {
jQuery(window).unbind('onbeforeunload')
});
jQuery(window).bind('keydown keyup', function(e) {
if (e.which === 116) {
jQuery(window).unbind('onbeforeunload');
}
if (e.which === 82 && e.ctrlKey) {
jQuery(window).unbind('onbeforeunload');
}
});
jQuery(window).mousedown(function(e) {
if (e.button == 2) {
jQuery(window).unbind('onbeforeunload');
} else {
jQuery(window).bind('onbeforeunload');
}
});
jQuery("form").submit(function() {
jQuery(window).unbind('onbeforeunload')
});
jQuery(document.body).unbind('onbeforeunload');
});
I have the below code. If I press enter key, it triggers click twice. How to avoid multiple triggering of event?(Kepping keyup keydown together). Note: This situation is occuring in chrome not in IE
$(document).on('keyup keydown','#txtbox', function (event) { if(event.which == 13 )$('#btnEnter').click(); return false;}});
I got the most easiest solution. Use event.type property.
if(event.which == 13 && event.type == 'keyup')
{
// Do some stuff. You can use event.type = 'keydown' also
}
Remove one of the events:
$(document).on('keyup', function (event) {
if(event.which == 13 ) $('#btnEnter').click();
});
Every keypress (now, that's another event by the way), triggers both keydown and keyup events, doesn't it?
Extending this snippet, this works when the AJAX Calls are completed:
$(document).on('keyup keydown', function (event) {
if(event.which === 13 ) {
$('#btnEnter').click();
}
});
$('#btnEnter').click(function() {
if ( $(this).hasClass("keydown") ) {
return;
}
$("div").append("I'm clicked on keydown only!<br/>");
$(this).is(".keydown") || $(this).addClass("keydown");
$.ajaxComplete(function() {
$('#btnEnter').removeClass("keydown");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnEnter">I'd be clicked on enter key down</button>
<div></div>
This is what I quickly came up with. Is this what you're after?
$(document).on('keyup keydown', function (event) {
if(event.which === 13 ) {
$('#btnEnter').click();
}
});
$('#btnEnter').click(function() {
if ( $(this).hasClass("keydown") ) {
return;
}
$("div").append("I'm clicked on keydown only!<br/>");
$(this).is(".keydown") || $(this).addClass("keydown");
setTimeout(function() {
$('#btnEnter').removeClass("keydown");
}, 150);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnEnter">I'd be clicked on enter key down</button>
<div></div>
Edit: To support my comment, you could do something like the following.
$.ajax({
method: "GET", // Or POST
url: "yourURL"
//other settings
}).done(function(data) {
//Do your stuff
//And then, do:
$('#btnEnter').removeClass("keydown");
});
Create var triggered = false; and add
&& !triggered
To your if condition, and
triggered = true;
To your function and make it false again whenever your event is ready to be triggered again
I have the function:
$(document).on('click keypress', '.pTile:not(.join)', function (e) {
if (e.keyCode != 13) {
return false;
}
//Do Stuff
});
This code allows the user to either click the div or press the enter key. My problem, though, is that it really only allows the enter button due to the decision structure that filters the key code. How do I allow both the click and enter button event to go through?
jQuery events have a type property which you can check:
$(document).on('click keypress', '.pTile:not(.join)', function (e) {
if (e.type == 'keypress' && e.keyCode != 13) {
return false;
}
//Do Stuff
});
Alternatively you could extract the logic to its own function and add separate handlers:
function doStuff() {
// Do stuff...
}
$(document).on('click', '.pTile:not(.join)', doStuff);
$(document).on('keypress', '.pTile:not(.join)', function() {
if (e.keyCode == 13)
doStuff.call(this);
});
This question already has answers here:
Close/hide an element when clicking outside of it (but not inside)
(3 answers)
Closed 8 years ago.
I've tried the answers to the similair questions of this without success.
In this jsfiddle: http://jsfiddle.net/h2HzN/6/
I have it set up that when you press escape it goes away using this:
$(document).keyup(function(e) {
if (e.keyCode == 27) {
$("#signup").fadeOut(250);
$("#window").slideUp(450);
}
});
but I also want it go away when you click anywhere but the black box. Thanks in advance.
This should do that DEMO
$(window).click(function() {
if(this.id !== "window") {
$("#signup").fadeOut(250);
$("#window").slideUp(450);
}
});
$("#window").on("click", function(e){
e.stopPropagation();
});
For the latest fiddle you've provided,
MODIFIED FIDDLE
Latest solution for me,
$("#popup").add("#signup_signin a").click(function(e) {
$("#signup").fadeIn(400);
$("#window").slideDown(450);
e.stopPropagation();
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
$("#signup").fadeOut(250);
$("#window").slideUp(450);
}
});
$(window).click(function() {
if(this.id !== "popup") {
$("#signup").fadeOut(250);
$("#window").slideUp(450);
}
});
$("#window").on("click", function(e){
e.stopPropagation();
});
It only fades out when Esc used or clicked anywhere but the black box and the sign up button.
Try this:
$(document).keyup(function (e) {
if (e.keyCode == 27) {
removeMessage();
}
}).click(function (e) {
if ($(e.target).closest('#window').length == 0 || $(e.target).prop('id') != 'window') {
removeMessage();
}
});
function removeMessage() {
$("#signup").fadeOut(250);
$("#window").slideUp(450);
}
Example fiddle
Note that checking for the closest #window element means that this code will work for any child element within the #window.
Option 1:
$("#window").on("click", function (e) {
//stop propagation so that it's not handled in document root.
e.stopPropagation();
});
//if not stopped by window i.e. not clicked on #window then handle and hide.
$(document).on("click", function (e) {
$("#signup").fadeOut(250);
$("#window").slideUp(450);
});
Option 2:
$(document).on("click", function (e) {
if(e.target.id === 'window') return;
$("#signup").fadeOut(250);
$("#window").slideUp(450);
});
Use stopPropagation():
http://jsfiddle.net/h2HzN/4/
$(document).keyup(function(e) {
if (e.keyCode == 27) {
$("#signup").fadeOut(250);
$("#window").slideUp(450);
}
}).click(function(){
$("#signup").fadeOut(250);
$("#window").slideUp(450);
});
//if you click within #window, the document.click will not trigger.
$("#window").on("click", function(e){
e.stopPropagation();
});
you can do this way:
$("div #window").click(function(e){
return false;
});
$(document.body).click(function(){
$("#signup").fadeOut(250);
$("#window").slideUp(450);
})
Fiddle DEMO