所以我在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;}So i'm having some difficulty with a click event within a page being rendered on iphone/ipad. This works propery in all desktop browsers i have checked as well as within android. The issue lies with clicking on the LIs in the footer. I have attempted to attach a click event to the footer elements via the following:
$('#footer li').live('click', function(e) { Site.loadpage($(this).attr('page') + '.html'); });But nothing happens (no javascript errors or anything). So to get more information i added a more generic click event, where perhaps i would find some other element getting in the way that is capturing the event with this:
$('*').live('click', function(e) { alert(e.target); });With this event, i can click anywhere on my page and i get an alert with the type of element i have clicked on. EXCEPT for in the footer, where nothing at all happening.
Here is some further information about the page i am using this with, i can provide more information if necessary, the only other thing that may be relevant is that i am using jquery for this (obviously).
I have a page with the following structure:
<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>And the following 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;}最满意答案
由于某些原因,我不相信iOS中的实时工作。 试试.on(),这应该有效。
$('*').on('click', function(e) { alert(e.target); });I don't believe live works in iOS for some reason. Try .on() , that should work.
$('*').on('click', function(e) { alert(e.target); });更多推荐
px,page,事件,#footer,电脑培训,计算机培训,IT培训"/> <meta name="descriptio
发布评论