Jump to content

bug? on click event


eneax
 Share

Recommended Posts

Hello im doing a simple jquery code for let some element of my page be hide or show on click, here my code:

$(document).ready(function(){
    //hide the box at the start
    $(".infoBox p").hide();
    // open the box when click on class element "toggle"
    $(".toggle").click(function(){
        $(".infoBox p").show(function(){
            //close the box by clicking in every part of the window
            if($(this).is(':visible')) {
                $(window).click(function(){ 
                $(".infoBox p").hide();
                });
            }
        });    
    });
     
});

as you can see i want that my element is hide at start, then when i click on element with class toggle it show me the box and at the end when the box is visible, when i click everywhere in the window the box will close.

Now the first time everything goes as it should, but from the second time when i click on my element "toggle" it does not show my box, i have to do a double click (why?), the hide on window works fine every times, but i can't understand why the second time i have to double click and not a simple click for open my box.

thanks everyone.

Link to comment
Share on other sites

You have a click event within a click event that is only initiated on the parent click event and every click after that? confusing! just imagine how confusing it finds it. Try separating them, the window event should be triggered only if the target event is not equal to toggle event and the paragraph is visible.

Edited by dsonesuk
Link to comment
Share on other sites

12 hours ago, dsonesuk said:

You have a click event within a click event that is only initiated on the parent click event and every click after that? confusing! just imagine how confusing it finds it. Try separating them, the window event should be triggered only if the target event is not equal to toggle event and the paragraph is visible.

thank you for the help, i'm new to javascript, i'm just learning in this site.

Here the code i use to fix the problem:

$(document).ready(function(){
  
    $(".infoBox p").hide();
    
    $(".toggle").click(function(){
        $(".infoBox p").toggle();  
    });
      
    $(window).click(function(e) {
      if (e.target.class != '.toggle' && $(e.target).parents('.toggle').length == 0 && $(".infoBox p").is(":visible") ) {
          $(".infoBox p").hide();
      }
    });
    
});

 

Link to comment
Share on other sites

47 minutes ago, shree420 said:

I would simply use .toggle() to hide or show an element. The code should be simply:


$(".infoBox p").toggle();

 

IF only the element itself was controling hide/show effect then yes! But when this effect is contolled also from outside the toggle() effect, it loses the ability to identify if it is visible  or hidden correctly.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...