CODEWITHSUNDEEP
javascriptjqueryjquery-eventsevent-listenerevent-bubbling
Noam Smadja
Noam Smadja

Reputation: 1035

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

Upvotes: 0

Views: 54

Answers (3)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

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">

Upvotes: 0

imvain2
imvain2

Reputation: 15847

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>

Upvotes: 1

IT goldman
IT goldman

Reputation: 19485

@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">

Upvotes: 1

Related Questions