javascript - 如何分离两个 jQuery 函数

Question

我想分离这些功能。它们应该分别对点击事件起作用:

第一个功能

 $("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');
 });

第二个功能

 $("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');
 });

这就是行动 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");
                    });
                });

问题是，如果我单击第二个函数的链接，总是会触发第一个函数。

我正在尝试做的事情的详细信息:

首先，我在 .php 上构建我的网站，以便为无需 JavaScript 的人们提供服务。现在我想动态加载“maincontent”。所以我发现我正在使用这个脚本:

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

如果您仅想要加载“主要内容”，它确实会做得很好。

但是我的网站在某些页面上有子导航，我想在其中加载子内容。在 .php 中，这些站点使用包含。所以我通过以下方式获取内容: href="page2.php?page=sub1"

因此，当我单击子链接时，它们也会动态加载，但脚本也会加载到整个主要内容加载区域。因此它并没有真正通过 .load() 加载内容，但是包含的子内容确实出现了。

所以我的想法就是把这个功能分离出来。第一个仅加载主要内容，第二个用于子导航仅刷新子内容区域。我什至不明白这个脚本如何动态加载包含内容，因为该链接是直接的 page2.php?page=sub1 链接。所有动态加载的内容通常看起来像“#index”，没有结尾“.php”。

一些简单的历史记录:

我正在尝试获得最佳的页面结构。为非 JavaScript 用户提供 .php，然后在其上放置一些动态加载内容。始终以保持每个页面的浏览器导航和浏览器链接(用于共享)完好无损为目标。

我不是 jQuery 专家。到目前为止，我所学到的只是通过反复试验和一些逻辑思维。但当然，我缺乏 JavaScript 的基础知识。

所以我的“逻辑”问题:

如何告诉“nav”链接仅执行其“$(window).bind”事件，并告诉“subnav”链接仅执行其“$(window).bin”事件。

这是正确的想法吗？

由于我在过去 18 小时内一直在尝试解决该问题，因此我将不胜感激任何形式的帮助。

谢谢。

重要:

使用第一个函数，我不仅加载主要内容，而且还使用每个链接更改页面上的 div。因此，对于任何可能想要将其组合在一起的解决方案，它都行不通，因为它们应该在页面上的不同区域执行不同的操作。这就是为什么我确实需要在每次导航/子导航单击时调用 window.bind。

谁能告诉我怎么做？

Answer 1

梅尔罗斯，在第二个函数中，您绑定(bind)到事件 hashchange2，这是不正确的。相反，您仍然想要绑定(bind)到hashchange。而不是:

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

尝试:

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

如果您想为事件订阅命名空间，您可以在要绑定(bind)的事件的末尾添加句点 (.)，然后添加命名空间:

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