javascript - 似乎无法模拟 jQuery 链接点击

Question

对于添加另一个 jQuery 问题，我深表歉意，但我已经为这段代码苦苦思索了太久。我的网站使用了以下代码:brianjenkins94.tumblr.com为了用通过 $.get() 加载的相应内容填充 #iframe div。导航正常工作(保存从未配置的 scrollzer 和 scrolly 库发生的令人讨厌的页面跳转)但我还没有能够弄清楚如何根据 document.location.hash 属性提供的内容恢复页面内容。如果有人能确定为什么此代码不起作用，或者可能提供一些关于是否有更好的方法来执行此操作的见解，我们将不胜感激。

提前致谢，布莱恩

---

$(document).ready(function() {
    console.log("Executing embedded jQuery.")
    if (document.location.hash.length == 0) {
        $("#home")[0].click();
        console.log("Simulating #home link click.");
    } else {
        $(document.location.hash)[0].click();
        console.log("Simulating " + document.location.hash + " link click.");
    }

    $("#header #nav a").click(function() {
        if (!$(this).hasClass("active")) {
            $("#nav a").removeClass("active");
            $(this).addClass("active");

            document.location.hash = $(this).attr('href');

            switch (document.location.hash) {
                case "#home":
                    $.get("{text:DocumentRoot}index.html", function(data) {
                        $("#iframe").html(data);
                        console.log("Loaded index.html");
                    });
                    break;
                case "#showcase":
                    $.get("{text:DocumentRoot}showcase.html", function(data) {
                        $("#iframe").html(data);
                        console.log("Loaded showcase.html");
                    });
                    break;
                case "#about":
                    $.get("{text:DocumentRoot}about.html", function(data) {
                        $("#iframe").html(data);
                        console.log("Loaded about.html");
                    });
                    break;
                case "#github":
                    $.get("{text:DocumentRoot}github.html", function(data) {
                        $("#iframe").html(data);
                        console.log("Loaded github.html");
                    });
                    break;
                default:
                    console.log("No corresponding page.")
                    event.preventDefault();
                    break;
            }
        }
    });
});

---

编辑:{text:DocumentRoot} 是一个 tumblr 占位符值，我设置为:https://rawgit.com/brianjenkins94/Sites/master/

Answer 1

您试图在实际设置事件之前触发事件。像这样重新组织您的代码:

$(document).ready(function() {
    console.log("Executing embedded jQuery.");

    $("#header #nav a").click(function() {
        if (!$(this).hasClass("active")) {
            $("#nav a").removeClass("active");
            $(this).addClass("active");

            document.location.hash = $(this).attr('href');

            switch (document.location.hash) {
                case "#home":
                    $.get("{text:DocumentRoot}index.html", function(data) {
                        $("#iframe").html(data);
                    });
                    break;
                case "#showcase":
                    $.get("{text:DocumentRoot}showcase.html", function(data) {
                        $("#iframe").html(data);
                    });
                    break;
                case "#about":
                    $.get("{text:DocumentRoot}about.html", function(data) {
                        $("#iframe").html(data);
                    });
                    break;
                case "#github":
                    $.get("{text:DocumentRoot}github.html", function(data) {
                        $("#iframe").html(data);
                    });
                    break;
                default:
                    event.preventDefault();
                    break;
            }
        }
    });

    if (document.location.hash.length == 0) {
        $("#home").trigger("click");
        console.log("Simulating #home link click.");
    } else {
        $(document.location.hash).trigger("click");
        console.log("Simulating " + document.location.hash + " link click.");
    }    
});