We Keep Coding

jQuery Ajaxstop inside of click event fired multiple times

On the woocommerce cart page I would like to add a notice if you use the quantity plus button and it is reaching the max stock. But I have an auto update on the cart, so I have to wait until the ajax load finishes to show the notice. What I realised using my script that the more you press the button after each ajax call the more times it is fired and the notice will be displayed more and more times. How to handle this? Thank you.
jQuery( document ).on( 'click', '.plus.button.is-form', function(e) {
var inputval = jQuery(this).closest('div.quantity.buttons_added').find('input[name^="cart"]').val();
var inputmax = jQuery(this).closest('div.quantity.buttons_added').find('input[name^="cart"]').attr('max');
if(inputval==inputmax){
jQuery( document ).ajaxStop( function($) {
alert("TeSZT");
jQuery('.woocommerce-notices-wrapper').html('<div class="woocommerce-info"><div class="woocommerce-info-text">Sajnos ebből a termékből jelenleg nincs több raktáron</div><span class="close-message"></span></div>');
});
}
});

You can try to disable to element to prevent multiple clicks. Enable this once ajaxStop is triggered for future use.
jQuery( document ).on( 'click', '.plus.button.is-form', function(e) {
var $this = $(this);
$this.prop( "disabled", true );
...
jQuery( document ).ajaxStop( function() {
$this.prop( "disabled", false );
});
...
})

How to add hover event listener to trigger event listener

I am trying to add a hover event listener to the code below so that when I hover over the link tag, it triggers the action to expand the submenu. I tried hover and mouseover and neither worked. Click seems to work fine though, Im not sure what I am doing wrong.
Array.prototype.slice.call( this.menuItems ).forEach( function( el, i ) {
var trigger = el.querySelector( 'a' );
if( self.touch ) {
``trigger``.addEventListener( 'touchstart', function( ev ) {
self._openMenu( this, ev ); } );
}
else {
trigger.addEventListener( 'click', function( ev ) { self._openMenu( this, ev ); });
}
});
window.addEventListener('resize', function( ev ) {
self._resizeHandler();
});

trigger.addEventListener('click', function(ev) {
self._openMenu(this, ev);
});
Write
trigger.addEventListener('mouseover', function(ev) {
self._openMenu(this, ev);
});
Replace click event by mouseover event

Don't punish yourself like this. Use a library like jQuery to attach eventhandlers to elements. Mouseover and hover are both supported by jQuery. Don't reinvent the wheel and build upon existing solutions like bootstrap to implement basic functionality like expanding a submenu.

Hide menu when ESC clicked using Javascript

I am currently customising an off-screen navigation menu.
I'd like to use Javascript to close the menu when ESC is clicked or if the user clicks outside of the menu's focus. How do I achieve this?
Here's my example: http://jsfiddle.net/q55xtcw4/
I've tried using this code:
$( document ).on( 'click', function ( e ) {
if ( $( e.target ).closest( elem ).length === 0 ) {
$( elem ).hide();
}
});
$( document ).on( 'keydown', function ( e ) {
if ( e.keyCode === 27 ) { // ESC
$( elem ).hide();
}
});
but no success.
Many thanks for any guidance here.

Dirty but useful solution for you change your JS code into this
$(".nav-trigger").click(function(e){e.stopPropagation()})
$( document ).on( 'click', function ( e ) {
$( ".nav-trigger" ).prop("checked",false);
});
$( document ).on( 'keydown', function ( e ) {
if ( e.keyCode === 27 ) { // ESC
$( ".nav-trigger" ).prop("checked",false);
}
});
Here is the working fiddle
here is the updated fiddle

Here is a working JSFiddle: http://jsfiddle.net/e9wa0093/2/
Basically, elem wasn't defined in your example. Same with show() and hide() methods. The changes I made to your code merely updates the checked property of the hidden checkbox used to control the position (i.e., visibility) of the menu.
Edit:
Corrected JSFiddle, as commented below: http://jsfiddle.net/e9wa0093/4/

Use This :-
$(document).keyup(function(e) {
if (e.keyCode == 13) $('.save').click(); // enter
if (e.keyCode == 27) $('.cancel').click(); // esc
});
FOR more info click here

elem is not something on your DOM
$( elem ).hide();
you should change it into your class or id like:
$('#menu').hide();

Try using something like this:
<script>
$(document).ready(function(){
$(document).keypress(function (evt) {
//Determine where our character code is coming from within the event
var charCode = evt.charCode || evt.keyCode;
if (charCode == 27) { //Enter key's keycode
//do what ever you want
$('#someid').hide();
}
});
});
</script>

The solution you are using is based on a CSS hack using a hidden checkbox.
You can control the status of the menu by toggling the value of this checkbox, rather than using javascript to hide the menu. Hiding the menu using javascript will actually break the CSS hack, as the CSS depends on the menu being visible but just offset from the side of the screen.
So replace:
$( elem ).hide();
With:
$("#nav-trigger").click();

The below code will collapse the menu on pressing escape
$(document).keyup(function(e) {
if (e.keyCode == 27) { $("#nav-trigger").removeAttr("checked") }
});

select div but not inputs within div jquery

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();
});

same function for Mouse Click and Key Press

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);