似乎无法模拟jQuery链接点击

Can't seem to simulate a jQuery link click

本文关键字:链接 jQuery 模拟      更新时间:2023-09-26

我很抱歉添加了另一个jQuery问题,但我已经对这段代码进行了太长时间的打击。我的网站上使用以下代码:brianjenkins94.tumblr.com,以便用通过 $.get() 加载的相应内容填充 #iframediv。导航工作正常(保存从未配置的滚动器和滚动库中发生的令人讨厌的页面跳转),但我还没有能够弄清楚如何根据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/

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

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

您可以直接在用 $("#home") jQuery 对象选择器选择的链接上调用.click()

$("#home").click();