Ad

Jquery Animation Occurs Twice On Close

- 1 answer

I have these divs called tags that are small then when you click on them they expand and the hidden elements inside are displayed. an X (< p >< span > X < / span > < / p > ) also shows up. This tag(div) should close when this X is clicked.

In Firefox, the tag opens fine. Then on close it closes and reopens. I can't figure out why the close is followed by an open.

By the way, I cannot get the first 3 lines to work at all.

Keep in mind, it works fine on Chrome. So Firefox is interpreting the Jquery differently

HTML

    <div class="row row1">
      <div id="tag1" class="tag">
        <p class="p1">Header</p>
        <video id="VideoA1" class="VideoA" name="media">
          <source src="">
          <source src="" type="video/mp4">
          <source src="" type="video/mv4">
        </video>
        <p id="X"><span id="X" class="glyphicon glyphicon-remove" aria-label="Close"></span></p>
        <iframe id="player1" class="ytplayer" width="390" height="220" src="" frameborder="0" allowfullscreen></iframe>
        <p class="text">Random Text</p>
      </div>
   </div>

JQUERY

//This will make the tags expand to take up the whole row when clicked
   $(".row .tag").on('click', function(event1){

 if(event1.target.id == "tag1") {
   alert("hello");
   return; //Do nothing if the X is closed
 }
else {

$(this).siblings().hide();
$(this).animate({
  width:"98%",
});
$(".VideoA", this).css('display', 'none');
$("img", this).addClass('offleft');
$(".tag").hover(function(){
  $(this).css("cursor","default")
});
$(".glyphicon-remove", this).delay(1000).show();
$(".glyphicon-remove", this).parent().show();
$('iframe',this).show();
$('.text',this).show();
}
});


$(".row1 .glyphicon-remove").click(function(){

 var clicked = this;
 $(this).parent().hide();
 $(".row1 iframe").hide();
 $(".row1 .text").hide();
 $(this).parent().parent().animate({
   width: "400px",
 },function(){
  $(".row1 .VideoA").show();
  $("img", this).removeClass('offleft');
  $(".tag",this).css('cursor','pointer');
  $(clicked).parent().parent().siblings().show();
});
event.stopPropagation();
});


$(".row2 .glyphicon-remove").click(function(){
var clicked = this;
$(this).parent().hide();
$(".row2 iframe").hide();
$(".row2 .text").hide();
$(this).parent().parent().animate({
  width: "400px",
},function(){
  $(".row2 .VideoA").show();
  $("img", this).removeClass('offleft');
  $(".tag",this).css('cursor','pointer');
  $(clicked).parent().parent().siblings().show();
  });
  event.stopPropagation();
});
Ad

Answer

event is undefined.

Inject event as $(".row2 .glyphicon-remove").click(function(event){. otherwise stopPropagation is useless.

I think, Chrome is strict, and on undefined it stops evaluation of the current function i.e. it throws an error when it encounters an undefined value and stops evaluation JS for that particular closure.

However, seems firefox continues evaluation and bubbles the click up the DOM tree. So, in your case, the event of clicking needs to be consumed by your function, and therefore it is required to manually stopPropagation by calling event.stopPropagation() and injecting event into your closure, or you could simply also return false at the end of your function as it is a jquery event object which is the same as calling event.preventDefault() and event.stopPropagation().

e.g.

    $(".row2 .glyphicon-remove").click(function(event){
    //stop propagation for the event but continue to evaluate current function
    event.stopPropagation(); 
      var clicked = this;
      $(this).parent().hide();
      $(".row2 iframe").hide();
      $(".row2 .text").hide();
      $(this).parent().parent().animate({
        width: "400px",
      },function(){
        $(".row2 .VideoA").show();
        $("img", this).removeClass('offleft');
        $(".tag",this).css('cursor','pointer');
        $(clicked).parent().parent().siblings().show();
      });
    return false; //jquery event stop propagation + prevent default    
    });
Ad
source: stackoverflow.com
Ad