在iphone / ipad上單擊固定位置頁腳中的事件未被觸發

Question

所以我在iphone / ipad上呈現的頁面中的點擊事件有些困難。 這在我檢查過的所有桌面瀏覽器以及android中都很有用。 問題在於單擊頁腳中的LI。 我試圖通過以下方法將單擊事件附加到頁腳元素：

$('#footer li').live('click', function(e) { 

        Site.loadpage($(this).attr('page') + '.html');

});

但沒有任何反應（沒有javascript錯誤或任何東西）。 因此，為了獲得更多信息，我添加了一個更通用的點擊事件，也許我會發現一些其他元素妨礙了捕獲事件的方式：

$('*').live('click', function(e) { 

    alert(e.target);

});

有了這個事件，我可以點擊我頁面上的任何地方，我會收到一個警告，其中包含我點擊的元素類型。 除了在頁腳中 ，什么都沒發生。

這里有一些關於我正在使用它的頁面的更多信息，我可以在必要時提供更多信息，唯一可能相關的其他事情是我正在使用jquery（顯然）。

我有一個頁面具有以下結構：

<body>
        <div id="header">

        </div>

        <div id="content">

        </div>

        <div id="footer">
            <ul>
                <li page="projects" class="projects"><span>Projects</span></li>
                <li page="people" class="people active"><span>People</span></li>    
                <li page="assignments" class="assignments"><span>Assignments</span></li>
                <li page="search" class="search"><span>Search</span></li>
                <li page="more" class="more"><span>More</span></li>
            </ul>
        </div>
</body>

以下CSS：

html { 

    height:100%; 
    width: 100%;
    margin:0; 
    overflow: hidden; 
    padding: 0px; 
    position: fixed;
    text-shadow: 0px 0px 0px transparent !important;
    letter-spacing: 0px;
    font-family: Helvetica;
    font-weight: bold;
}

body { 

    padding: 0px;
    margin: 0px; 
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-family: Helvetica;
}

#header { 

    background: url(../images/devices/iphone/header.jpg); 
    color: white;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 45px; /* ADJUST FOR IPAD */
    box-shadow: -5px -5px 4px 7px #888;
}

#header .center { 

    position: static;
    display: block;
    width: 100%;
    max-height: 45px; /* ADJUST FOR IPAD */
    text-align: center;

}

#header h1.center { margin: 8px 0px 10px 0px; }

#content { 

    position: absolute;
    bottom: 48px;
    top: 45px;
    left: 0px;
    right: 0px;
    overflow: hidden;



}

#footer { 

    background: url(../images/devices/iphone/header.jpg);
    background-size: 48px 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 48px; /* ADJUST FOR IPAD */
    color: white;
    text-align: center;
}

#footer { text-align: center; }
#footer ul { list-style-type: none; padding-left: 0px; margin-left: auto; margin-right: auto; margin-top: 1px; font-size: 8px; }
#footer li { padding-top: 35px; padding-bottom: 1px; display: inline-block; background-image: url(../images/inactive-menu.png); width: 62px; background-size: 312px; }
#footer li.active { background-image: url(../images/active-menu.png); }
#footer li span { width: 57px; padding-top: 10px; }
#footer li.projects { background-position: 0px 0px;}
#footer li.people { background-position: -62px 0px;}
#footer li.assignments { background-position: -124px 0px;}
#footer li.search { background-position: -187px 0px;}
#footer li.more { background-position: -250px 0px;}

Answer 1

由於某些原因，我不相信iOS中的實時工作。 試試.on（），這應該有效。

$('*').on('click', function(e) { 

    alert(e.target);

});

Answer 2

我有同樣的問題。 試圖警告這個頁腳元素上的事件沒有運氣。 我偶然嘗試過：

$('*').on('touchend', function(e) {});

請注意我使用'touchend'作為我的觸發事件並且還設置了：

cursor: pointer;

在iPhone 3GS，iOS 5.1.1上測試。

祝好運。

Answer 3

為什么不使用觸摸事件而不是點擊事件，這是一個鼠標事件，而不是觸摸屏事件 - touchstart和touchend作為觸摸屏事件更有意義

在iphone / ipad上單擊固定位置頁腳中的事件未被觸發

問題描述

3 個解決方案

解決方案1
2 已采納 2012-11-08 21:38:01

解決方案2
2 2013-01-03 22:52:40

解決方案3
0 2012-11-08 22:02:59

在iphone / ipad上單擊固定位置頁腳中的事件未被觸發

問題描述

3 個解決方案

解決方案1 2 已采納 2012-11-08 21:38:01

解決方案2 2 2013-01-03 22:52:40

解決方案3 0 2012-11-08 22:02:59

解決方案1
2 已采納 2012-11-08 21:38:01

解決方案2
2 2013-01-03 22:52:40

解決方案3
0 2012-11-08 22:02:59