jquery - Linked image is not clickable in iOS 6, but text is -

jquery - Linked image is not clickable in iOS 6, but text is -

i've run issue ios 6 device (iphone) unable click icons generated javascript. i've been debugging many hours, seems click/vclick events not firing. can't css :active state lite images (sometimes can milliseconds, still doesn't register js click).

i set event utilize mouseover test, , worked - although inconsistently. it's if bounds of element incorrect.

the icons fine, can't click on them.

i added text button, spill below image. this added text clickable. working, reason images don't register click event. think might css issue. doesn't matter if text comes before or after (proving menu bar background not issue).

there nil special images. <img> tag, display: block, set width/height. gave images cursor: pointer because read prepare it. doesn't.

the generated html:

<div id="menubar"> <div class="menu-icon-group clearfix"> <a class="menu-icon icon-add-woman ui-link" data-page="add-woman"> <img src="images/icons/add-woman-132-w.png" alt="" class="menuicon-normal"> <img src="images/icons/add-woman-132-b.png" alt="" class="menuicon-active"> <span style="color:#000; border:1px solid #f00">test</span> </a> <a class="menu-icon icon-panel ui-link"> <img src="images/icons/panel-132-w.png" alt="" class="menuicon-normal"> <img src="images/icons/panel-132-b.png" alt="" class="menuicon-active"> <span style="color:#000; border:1px solid #f00">test</span> </a> </div> </div>

the css:

#menubar .menu-icon-group img { width: 100%; height: 100%; cursor: pointer; } #menubar .menu-icon-group { float: right; } #menubar .menu-icon { float: left; } #menubar .menu-icon img.menuicon-active { display: none; } #menubar .menu-icon img.menuicon-normal { display: block; } #menubar .menu-icon:active img.menuicon-normal { display: none; } #menubar .menu-icon:active img.menuicon-active { display: block; } #menubar .menu-icon:active { background: #ffff2a; }

the javascript (only applies first link, sec link has no data-page attribute):

// clicked on nav button links page (by data-page property) $(document).on('click vclick', '#menubar .menu-icon', function(e) { alert('menu icon clicked!'); var page_key = $(this).attr('data-page'); if ( !page_key ) return; var the_page = get_page( page_key ); if ( the_page.filename ) { $('body').pagecontainer( 'change', the_page.filename ); } });

it's not bug. have not used display:none in years type of thing because ios has not honoring click events on doesn't exist.

i utilize opacity:0;overflow:hidden;width:0px;height:0px; new display:none , reverse on toggled state.

jquery ios css