Hash change cancel double trigger("click")

Question

I've got some kind of loop here, explanation under code.

        $(document).ready(function(){
            var newHash      = "";
            $('a').click(function(event) {
                var id = $(this).attr('href');
                alert(id);
                //Do something with selector with id that is clicked

                window.location.hash = $(this).attr("href");
                event.preventDefault(); 

            });
            $(window).bind('hashchange', function(){

                newHash = window.location.hash.substring(1);

                if (newHash) {
                   $("ul li." + newHash + " a").trigger("click");
                };

            });

            $(window).trigger('hashchange');
        })


    <ul>
        <li class="first"><a href="#first">first</a></li>
        <li><a href="#second">second</a></li>
        <li><a href="#third">third</a></li>
    </ul>

I'm using ba-hashchange plugin by Ben Alman Here is live example -> EXTERNAL LINK ON MY SERVER

Notice when you click "#first" you got 2 alerts but when paste link with changed hash ->CHANGED HASH You got only one alert.

Its like a loop, when you click link you get alert from click and new hash which trigger from changing URL. So you got 2 alerts.

I want only 1 alert. In this case. You paste link its trigger link which supposed from hash name and you got 1 alert. And when you click link it change hash but not trigger it from changing this hash.

score 0 · Answer 1 · answered May 28 '13 at 21:36

You are receiving two alerts because you are effectively clicking on the 'first' link twice when you load the page without a hash. This is what is happening:

Visit your site
Your 'hashchange' handler is invoked (because for some reason you call $(window).trigger('hashchange'), however because there is no newHash value, nothing happens
Click 'first'
Your click handler is invoked, you call alert() (first alert!) and then the hash is changed
Because the hash was changed from within your click handler, your 'hashchange' handler is invoked and NOW because newHash has a valid value, your handler clicks the link again (programmatically) and you get a second alert.

When you load up the page with a preset hash, a similar set of events occur:

Visit your site with the hash set
Your 'hashchange' handler is invoked, but unlike before there is now a non-empty newHash value, so your code programmatically clicks the first link and you get an alert. The hash is set to the same value as before so the hashchange handler does nothing.
Click 'first'
Your click handler is invoked, alert() is called but your hash remains the same so your hashchange handler does not get invoked. So in this scenario, you receive exactly 1 alert.

It's not entirely clear what you are trying to accomplish... because if you just want to manipulate the value of the hash, you can do so from the hashchange handler - why does your hashchange handler click your link? Similarly, if you just want to manipulate some attribute tied to your link, you can do so from within the click handler - why do you bother sticking it in the hash?

I know its pointless what i did cuz its some kind of circle. I want to create some function that trigger that alert on hashchange and click link, not double like it happened. And i dont know how to do this. Thats why i wrote this question. I want hash change for example scrolling webpage when i just copy some1 link and he get position and action. — Szymon, May 28 '13 at 21:44
Ok those question was stupid right now I get what I want and how to do it. Thank you — Szymon, May 30 '13 at 12:13

score 0 · Answer 2 · answered May 30 '13 at 12:24

Question was pointless, now its solved. In this case i just need to.

$(document).ready(function(){
        var newHash      = "";
        $('a').click(function(event) {

            //Do something with selector with id that is clicked

            window.location.hash = $(this).attr("href");
            event.preventDefault(); 

        });
        $(window).bind('hashchange', function(){

            newHash = window.location.hash.substring(1);

            if (newHash) {

            alert(newHash);
            };

        });

        $(window).trigger('hashchange');
    })

It was trivial cuz my problem was complex but i need to sleep with it to comprehend

Hash change cancel double trigger("click")

2 Answers2