Develop Reference

jQuery event listener fires before selector applied

I am trying to make a system that would require an admin to click a delete button twice before it fires the action. if he focusout of the button, it resets.
$(".unarmed").css("filter", "grayscale(1)").removeClass("armed").click(function(e) {
$(this).css("filter", "").removeClass("unarmed").addClass("armed");
}).mouseout(function() {
$(this).css("filter", "grayscale(1)").removeClass("armed").addClass("unarmed");
});
$("body").on("click", ".armed", function() {
alert("boom");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="unwait unarmed" src="plus.png">
I've seen jQuery event listener fires before selector applied? but adding e.stopPropagation() causes the second click to not fire.
when e.stopPropagation() is not in the code, it does fire the second click, but together with the first click (i think this means the problem is not with the second click selector)
here is a fiddle with e.stopPropagation():
https://jsfiddle.net/3jyr72t6/
also, if you have suggestion for making it prettier, i'm open for suggestions :D

#icecub answer as snippet:
$(document).ready(function() {
$(".unarmed").css("filter", "grayscale(1)");
$(".unarmed").click(function(e) {
if ($(this).hasClass("armed")) {
console.log("boom");
}
$(this).css("filter", "").removeClass("unarmed").addClass("armed");
}).mouseout(function() {
$(this).css("filter", "grayscale(1)").removeClass("armed").addClass("unarmed");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="unwait unarmed" src="https://kns.im/include/img/plus.png" style="width:50px">

You can always just use the jquery dblclick event. Jquery dblclick
$(document).on("dblclick",".btn-delete",function(){
console.log("DELETE");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn-delete">DELETE</button>

You can use a simple function to detect click outside the element .. See the next example
$("img.unwait").on("click" , function(e){
let $this = $(this);
if($this.hasClass("unarmed")){
$this.removeClass("unarmed").addClass("armed");
}else if($this.hasClass("armed")){
alert("BOOM");
$this.removeClass("armed").addClass("unarmed");
}
});
detect_click_out(".armed" , function(){
$(".armed").removeClass("armed").addClass("unarmed");
});
function detect_click_out(element_selector , action){
$(document).on('click',function(e){
if (!$(element_selector).is(e.target) // if the target of the click isn't the container...
&& $(element_selector).has(e.target).length === 0) // ... nor a descendant of the container
{action();} // run the action as a function
});
}
img{
width : 50px;
}
.unarmed{
filter : grayscale(1);
}
.armed{
filter : grayscale(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="unwait unarmed" src="https://png.pngtree.com/element_our/sm/20180515/sm_5afb099d307d3.jpg">

disable click after clicking on $('body').on('click') event

hi I want to disable click after the user clicked on an element
the elements loaded after my script (elements built by javascript) and I can't use these code
$('.disableClick').click(
function (e) {
e.stopPropagation();
return false;
}
)
and I use these code to do work on the element by click
$('body').on('click','.disableClick',
function (e) {
if(!is_valid)
{
e.preventDefault();
e.stopPropagation();
return false;
}
}
);
I think disabling click codes like e.stopPropagation() don't support for
$('body').on('click')
event

try this:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$('body').on('click','.disableClick',
function (e) {
$(this).attr("disabled", true);
}
);
</script>
It works on body as well as on document both

You need to use unbind I guess.
Try
if(!is_valid){
$('selector').unbind("click")
}

Alert popup and confirm disable the e.preventDefault()

I have textboxes in html table, and I want to bind the enter event with jQuery like this
$(function ()
$('#MainPage_resultatTable td.resultat input:text')
.bind('keydown',function (e) {
if (e.keyCode == 13) {
e.preventDefault();
confirm('are-you ok ?'); /* or alert*/
}
});
});
The e.preventDefault() doesn't work. The postback is achieved
When I remove the "confirm" line the e.preventDefault() do the job.
Any suggestion for keeping the confim popup without postback would be appreciated.
Note : I tried it with e.stopPropagation(); and e.stopImmediatePropagation();. Same result.

Temporarily disable button using jQuery

I would like to disable a button element without removing the listener, for example I have ths following code:
<input id="in" />
<button id="sub">Submit</button>
$('#sub').click(function (e) {
//Some actions
});
$($('#in').keyup(function (e) {
if (new Date($(this).val()) == 'Invalid Date') {
$(this).addClass('invalid');
$('#sub').addClass('disabled');
}
else {
$(this).removeClass('invalid');
$('#sub').removeClass('disabled');
}
});
I would like to unbind the button click listener, but if I'll use off() or unbind() I will have to 're-bind' it in the else clause.
Is there any better way of doing this?

How about disabling the button instead of adding a class?
HTML:
<button>Disable Me</button>
JS
$(function() {
$("button").click(function() {
alert("click!");
$(this).prop("disabled", true);
});
});
CSS
button[disabled] {
color: red;
}
Here is a jsFiddle to demonstrate.

use $('#sub').prop('disabled');

Focus Which not triggered by click

How to trigger an action when focusing an input but the focus event not come from click?
$('#input').focus(function(){
if(not come from click)
{
alert('Holla!');
}
});

To tell between "focus" events that come from keyboard and those that come from mouse, you can track the mouse events.
First, to understand the sequence of events that happen when you click an input, or Tab into it, look at the following jsfiddle: http://jsfiddle.net/orlenko/fyFkk/
In it, we'll log mousedown, mouseup, click, focus, and blur events.\
<input type="text" id="zero"/>
<input type="text" id="one"/>
JavaScript:
$(function() {
var one = $('#one');
one.mousedown(function() {
console.log('mousedown');
});
one.mouseup(function() {
console.log('mouseup');
});
one.click(function() {
console.log('click');
});
one.focus(function() {
console.log('focus');
});
one.blur(function() {
console.log('blur');
});
});
If we simply click on the input, and then on another control, we'll get the following:
mousedown
focus
mouseup
click
blur
But if we tab into and out of the input, we'll see in the console:
focus
blur
So, if we keep track of mousedown and blur events, we can tell between a keyboard-based focus and a mouse-based one. For example:
$(function() {
var one = $('#one');
one.mousedown(function() {
console.log('mousedown');
$(this).data('mousedown', true);
});
one.mouseup(function() {
console.log('mouseup');
});
one.click(function() {
console.log('click');
});
one.focus(function() {
if ($(this).data('mousedown')) {
console.log('You clicked it!');
} else {
console.log('You tabbed it!');
}
});
one.blur(function() {
console.log('blur');
$(this).data('mousedown', false);
});
});
A fiddle with this example: http://jsfiddle.net/orlenko/cwRAw/

Use keyup
$('#input').keyup(function(){
alert('Called only when the focus is on element through keypress');
});

function ren(){
alert('Holla!');
}
$('input').focus(ren);
$('input').mousedown(function(){
$('input').off('focus',ren);
});
$('input').mouseup(function(){
$('input').on('focus',ren);
});
Don't check in focus function instead remove the focus function when making a click
Demonstration