Как разделить две функции 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');
 });

Вот что произошло в ДЕЙСТВИИ А:

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

Проблема в том, что, если я щелкаю по функции Link of Second, всегда срабатывает первая функция.

Подробности того, что я пытаюсь сделать:

Сначала я строю свой сайт на .php, чтобы обслуживать людей без JavaScript. Теперь я хочу загружать «maincontent» динамически. Итак, я нашел этот скрипт, который я использую:

http://css -tricks.com / 6336-динамических страниц-замена-содержание /

Он отлично работает, если вы только хотите загрузить «maincontents».

Но мой сайт имеет суб-навигацию на некоторых страницах, где я хочу загрузить суб-контент. В .php использование этих сайтов включает. Поэтому я получаю контент по: href = "page2.php? Page = sub1"

Итак, когда я нажимаю на подссылки, они теперь также загружаются динамически, но сценарий также во всей области загрузки основного контента. Так что он на самом деле не загружает контент с помощью .load (), но субконтент включений действительно появляется.

Так что я думал просто отделить эту функцию. Первый просто загружает основной контент, а второй - для суб-навигации, чтобы обновить только область суб-контента. Я даже не понимаю, как этот скрипт динамически загружает включаемый контент, поскольку ссылка - это прямая ссылка page2.php? Page = sub1. Весь динамически загружаемый контент обычно выглядит как "#index", без окончания ".php".

Немного истории:

Я пытаюсь получить лучшую структуру страницы. Поставьте .php для пользователя, не являющегося пользователем JavaScript, а затем поместите поверх него динамические элементы загрузки. Всегда с целью сохранить навигацию браузера и ссылки браузера (для совместного использования) для каждой страницы в такте.

Я не эксперт по jQuery. Все, что я узнал до сих пор, было методом проб и ошибок и логического мышления. Но, конечно, у меня недостаточно фундаментальных знаний в JavaScript.

Итак, мой «логичный» вопрос:

Как я могу сказать ссылкам "nav" выполнить только их "$ (window) .bind" -Event и указать ссылкам "subnav" только для выполнения их "$ (window) .bin" -event.

Это правильное мышление?

Поскольку я уже пытался решить эту проблему почти последние 18 часов, я буду признателен за любую помощь.

Спасибо.

ВАЖНО:

С первой функцией я не только загружаю основной контент, но и меняю div на странице с каждой ссылкой. Так что для любого решения, которое может захотеть собрать его в одно, оно не будет работать, потому что они должны делать разные вещи в разных областях на странице. Вот почему мне действительно нужно вызывать window.bind при каждом клике nav / subnav.

Может кто-нибудь показать мне, как?

Answer 1

Хорошо, похоже, что вы хотите выполнить действие A при нажатии на ссылку внутри .nav и действие B при нажатии на ссылку внутри .subnav.

Вы можете просто поместить эти действия в обработчики событий. Кроме того, если .subnav вложено в .nav, вы должны ограничить свой селектор:

// 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;
});

Не думаю, что прослушивание события hashchange поможет вам в этом, так как это событие запускается в обоих случаях, и вы не можете знать, какой элемент был ответственным (вы, вероятно, можете как-то, но зачем делать это слишком сложным?) .

Answer 2

Вот, кстати, решение, к которому я пришел:

Поняв, что событие haschange не имеет к нему никакого отношения (если вы не хотите, чтобы субконтент тоже был отмечен закладкой)) Я только что добавил новую функцию загрузки для подконтента:

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

                });

        });

}); 

Answer 3

Melros, во второй функции вы привязываетесь к событию hashchange2, что неверно.Вместо этого вы STILL хотите привязаться к hashchange.Вместо:

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

Попробуйте:

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

Если вы хотите создать пространство имен для ваших подписок на события, вы можете добавить суффикс окончания события, к которому вы привязываетесь, с точкой (.), а затем пространство имен:

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