How to Separate Two jQuery Functions

I want to separate these functions. They should both work separately on click events:

FIRST FUNCTION

 $("ul.nav li").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });

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

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

        if (newHash) {
           ACTION A
      });
$(window).trigger('hashchange');
 });

SECOND FUNCTION

 $("ul.subnav li").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });

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

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

        if (newHash) {
           ACTION B
      });
$(window).trigger('hashchange');
 });

This is what happend in ACTION A:

 $mainContent
                .find(".maincontent")
                .fadeOut(200, function() {
                    $mainContent.hide().load(newHash + " .maincontent", function() {
                        $mainContent.fadeIn(200, function() {
                            $pageWrap.animate({
                                height: baseHeight + $mainContent.height() + "px"
                            });
                        });
                        $(".nav a").removeClass("active");
                        $(".nav a[href="+newHash+"]").addClass("active");
                    });
                });

The Problem is that if I click the Link of the Second function always the the first function fires.

Details of what I'm trying to do:

First, I build my site on .php to serve poeple without JavaScript. Now I want to load the "maincontent" dynamically. So I found this script I'm using:

http://css-tricks.com/6336-dynamic-page-replacing-content/

It does do a great job if you only want to load "maincontents".

But my site has sub-navigation on some pages where I want to load the sub-c开发者_Python百科ontent. In .php these sites use includes. So I get my content by: href="page2.php?page=sub1"

So, when I click on the sub-links now they load also dynamically but the script also on the whole maincontent loading area. So it doesn't really load content by .load() but the sub-content of the includes do appear.

So what I thought was just to separate this function. The first to simply load the maincontents and a second one for the sub-navigation to refresh only the sub-content area. I don't even understand how this script loads the include content dynamically since the link is the straight page2.php?page=sub1 link. All dynamic loaded content usually looks like "#index", without the ending ".php".

Some quick history:

I'm trying to get the best page structure. Deliver .php for non JavaScript user and then put some dynamic loading stuff over it. Always with the goal to keep the browser navigation and the browser links (for sharing) for each page in tact.

I'm not an jQuery expert. All I have learned so far was by trial and error and some logical thinking. But of course, I have a lack of fundamental knowledge in JavaScript.

So my "logical" question:

How can I tell the "nav" links to perform only their "$(window).bind"-Event and to tell the "subnav" links only to perfom their "$(window).bin"-event.

Is this the right thinking?

Since I've already been trying to solve it for nearly the last 18h, I'll appreciate any kind of help.

Thank you.

IMPORTANT:

With the first function I not just only load the maincontent but also I'm changing a div on the page with every link. So for any solution that might want to put it together in one, it won't work, cause they should do different things on different areas on the page. That's why I really need to call on the window.bind with each nav/subnav click.

Can anyone show me how?

---

Melros, In your second function, you are binding to the event hashchange2, which is incorrect. Instead, you STILL want to bind to hashchange. Instead of:

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

Try:

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

If you want to namespace your event subscriptions, you can suffix the ending of the event you are binding to with a period (.) and then the namespace:

$("#test").bind("click.namespace1", function() { });
$("#test").bind("click.namespace2", function() { });

---

Ok, it seems that you want to execute action A when a link inside .nav is clicked, and action B when a link inside .subnav is clicked.

You can just put these actions inside the event handlers. Furthermor, if .subnav is nested inside .nav, you have to restrict your selector:

// consider only direct children
$("ul.nav > li").delegate("a", "click", function() {
    var href = $(this).attr("href");

    if(window.location.hash !== href) {
        Action A

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

    return false;
});

// consider only direct children
$("ul.subnav > li").delegate("a", "click", function() {
    var href = $(this).attr("href");

    if(window.location.hash !== href) {
        Action B

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

    return false;
});

I don't think listening to the hashchange event will help you here, as this event is triggered in both cases and you cannot know which element was responsible (you probably can somehow, but why make it overly complicated?).

---

Here's by the way the solution I came to:

After understanding that the haschange-event doesn't have to do anything with it (as long as you don't want to make the subcontent bookmarkable too) I just added a new load function for the subcontent:

$(function(){

            $("ul.linkbox li a").live('click', function (e) {
            newLink = $(this).attr("href");
            e.preventDefault();

                $(".textbox").find(".subcontent").fadeTo(200,0, function() {

                    $(".textbox").load(newLink +  " .subcontent" , function() {

                        $(".subcontent").fadeTo(200,1, function() {



                        }); 
                    }); 

                $("#wrapper").css("height","auto");
                $("ul.linkbox li a").removeClass("activesub");
                $("ul.linkbox li a[href='"+newLink+"']").addClass("activesub");

                });

        });

});