在移动光标之前,jQuery函数不响应".click"？

Question

我有一个简单的CSS样式切换器的网站.我使用以下代码处理单击两个主题按钮的功能,启动从暗到亮的切换,反之亦然:

<script>
    $(function() {
    $(".light").click(function(){
        $("link").attr("href", "css/lightHome.css");
        $(".light").attr("disabled", "disabled");
        $(".dark").removeAttr("disabled", "disabled")

    })
    $(".dark").click(function(){
        $("link").attr("href", "css/home.css");
        $(".dark").attr("disabled", "disabled");
        $(".light").removeAttr("disabled", "disabled")
    })
});
</script>

关于它的一切都完全按照我的要求运行,除了当我点击按钮时没有任何反应.但第二个我点击后移动光标位置,然后切换发生.我没有最好的jQuery掌握,所以我希望它是对DOM过程的简单缺乏理解.可能与缺乏"准备好"有关？

我已经尝试过点击并等待几分钟,直到我移动光标才会发生任何事情.

网站:

http://watsoncn.info

Answer 1

试试这个功能：

function toggleCss(file, index) {
    var oldFile = document.getElementsByTagName("link").item(index);
    var newFile = document.createElement("link");
    newFile.setAttribute("rel", "stylesheet");
    newFile.setAttribute("type", "text/css");
    newFile.setAttribute("href", file);

    document.getElementsByTagName("head").item(0).replaceChild(newFile, oldFile);
}

$(".dark").on("click", function() {
    toggleCss("css/lightHome.css");
    $(".dark").attr("disabled", "disabled");
    $(".light").removeAttr("disabled", "disabled");
});

$(".light").on("click", function() {
    toggleCss("css/home.css");
    $(".light").attr("disabled", "disabled");
    $(".dark").removeAttr("disabled", "disabled");
});