Question

我是一名开发新手的网站，刚刚完成了我的第一个网站建设。我正在各种平台上进行测试，发现在Safari（手机和平板电脑上，没有在桌面上试过）上，与$（document）.on（）相关的命令根本不起作用。

相同的代码在Chrome，IE和FireFox上完美运行，所以我猜这是一个兼容性问题？

有快速解决方法吗？或者我只是做错了！？

$(document).ready(function () {

    //load home as default
    $("#main").load("pages/home.htm");

    //events for nav bar
    $("#home_button").click(function() {
        $("#main").load("pages/home.htm");
    });
    $("#news_button").click(function() {
        $("#main").load("pages/news.htm");
    });
    $("#about_button").click(function() {
        $("#main").load("pages/about.htm");
    });
    $("#contact_button").click(function() {
        $("#main").load("pages/contact.htm");
    });

    //events for home section - note this is a bit more tricky as the home page is being added dynamically by the code above ...

    $(document).on("mouseenter", "#news_link", function() {
        $(this).css("opacity","0.5");
    });
    $(document).on("mouseleave", "#news_link", function() {
        $(this).css("opacity","1");
    });
    $(document).on("click","#news_link", function() {
        $("#main").load("pages/news.htm");
    });


    $(document).on("mouseenter", "#about_link", function() {
        $(this).css("opacity","0.5");
    });
    $(document).on("mouseleave", "#about_link", function() {
        $(this).css("opacity","1");
    });
    $(document).on("click","#about_link", function() {
        $("#main").load("pages/about.htm");
    });

    //about - contact me link function

    $(document).on("mouseenter", ".contact", function() {
        $(this).css("opacity","0.5");
    });
    $(document).on("mouseleave", ".contact", function() {
        $(this).css("opacity","1");
    });
    $(document).on("click",".contact", function() {
        $("#main").load("pages/contact.htm");
    });     

});

谢谢你们。

Answer 1

谢谢Jonathon，这正是问题所在。为了其他遇到此问题的人的利益：

Safari在将侦听器附加到它不相信的可点击的元素时遇到了问题＆＃39;所以我只需要在元素上添加一个虚拟onClick。我添加了这段代码：

style="cursor:pointer" 
onClick=""

现在它正在Iphone和Ipad上按预期工作。

$（document）.on（）函数不能与Safari一起使用

1 个答案: