JQuery statement if/else not working on click function, runs if and else part

Question

First I verify if the text of the element is "ocultar menu", if it's true, I change the text and add hide Class to some others elements. My intention is that the function breaks there, and see the value of text only in the start of the event, and no when I change it inside the function. But when I click once, it appears hide, very fast in the console of the browser, it's like the functions checks the value and continue to check and pass in the if and in the else part of the code. I used StopPropagation() but doesn't works and I've tried to change the on event to click and not worked too. Need Help, thanks.

   var $position = $("#ocult-menu").position();
    $("#ocult-menu").on("click",function(){ 
        var $text = $(this).find('p').text();
        if ($text == "ocultar menu"){
            $(".info").addClass("hide");
            $(".photo").addClass("hide");
            $(".map").addClass("hide");
            $(".similar").addClass("hide");
            $(".share").addClass("hide");
            $("#menu-single").offset({left: $position.left});
            $(".exibir").css("background-position","-1px 430px");
            $(this).find('p').text("exibir menu");
        }
        else if( $text == "exibir menu"){
            $(".info").removeClass("hide");
            $(".photo").removeClass("hide");
            $(".map").removeClass("hide");
            $(".similar").removeClass("hide");
            $(".share").removeClass("hide");
            $("#menu-single").offset({left: $position.left});
            $(this).find('p').text("ocultar menu");
        }
    });

Your HTML markup is not clear, but be aware that $(this).find('p').text() finds all the text of all <p>s — jsmorph
– jsmorph, Commented Sep 17, 2013 at 17:14
What type of element is #ocult-menu? Is it an a that is reloading the page? It would help if you created a fiddle that demonstrates the issue. — Jason P
– Jason P, Commented Sep 17, 2013 at 17:20

mkerley · Accepted Answer · 2013-09-17 17:34:12Z

1

You might be adding the onclick handler more than once, causing it to execute multiple times per click. Try adding some log statements, like so:

$("#ocult-menu").on("click",function(){ 
    console.log("onclick");
    ...
    if ($text == "ocultar menu"){
        console.log("text = ocultar menu");
        ...
    }
    else if( $text == "exibir menu"){
        console.log("text = exibir menu");
        ...
    }
});

If you see "onclick" being logged more than once, that's the problem. Then you can move this handler setup code to your initial one-time page load function.

$(function() {
    $("#ocult-menu").on("click",function(){
        ...
    });
});

Hope that helps.

edited Sep 17, 2013 at 17:34

answered Sep 17, 2013 at 17:22

mkerley

3963 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jaqueline Passos Over a year ago

I made this, but didn't worked, Its disparing twice... And now I saw that in some other parts in the site this is happening too, when I make a ajax call, it calls twice, what should I do? Its a event in On click... a function that I call inside is been called twice

mkerley Over a year ago

What do you see in the log after adding the console.log statements I suggested?

Jaqueline Passos · Accepted Answer · 2013-11-08 18:21:03Z

1

Well, I saw in the site that the click event is been called twice, if I go to the console and type $("#ocult-menu").click() it works well

answered Nov 8, 2013 at 18:21

Jaqueline Passos

1,3992 gold badges24 silver badges39 bronze badges

Collectives™ on Stack Overflow

JQuery statement if/else not working on click function, runs if and else part

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related