• I’ve created a plugin that loads a pure CSS accordion list into a layer via plugin.sprite.appendChild after the content is fetched via an AJAX call.
    To actuate the accordion functionality I have a label-for-input(checkbox) relationship.

    Here is a snippet of the code in question:

    Code
    <li class="file">
    <a href="#" onclick="xploritObj.call('gotoprep(); loadpanoscene(scene_xml.php?tourid=102098&amp;sceneid=103889,scene103889,null,MERGE,BLEND(1));');">Greater LA</a>
    </li>
    <li><label id="the_97155_102200" for="97155_102200" onclick="">LAX</label> <input type="checkbox" id="97155_102200">

    <ol>

    <li class="file"><a href="#" onclick="xploritObj.call('gotoprep(); loadpanoscene(scene_xml.php?tourid=102098&amp;sceneid=110532,scene110532,null,MERGE,BLEND(1));');">LAX Aerial
 View</a>
 </li>

    <li class="file"><a href="#" onclick="xploritObj.call('gotoprep(); loadpanoscene(scene_xml.php?tourid=102098&amp;sceneid=97172,scene97172,null,MERGE,BLEND(1));');">World Way
 Entrance</a>
 </li>
    </ol>

    </li>




    In a “desktop” environment this works perfectly.
    However, in mobile Safari the label-for-input(checkbox) relationship "breaks". Meaning the onclick that should be firing when "touching" the label connected to the checkbox is not "checking" the checkbox. HOWEVER, all of the <a>-links still work as expected, receiving the onclick and the xploritObj.call firing as expected.
    Also when there is an overflow situation, the content should scroll. It does in desktop but not in mobile.


    I've double checked to see if there was an errant event.preventDefault() somehow coming into play and could not find one.


    What is odd is that if I switch out the empty onclick in the <label> tag to ontouchstart and add in debugging code, the ontouchstart will "work" and return the console.log while the same code in the onclick will just not fire.


    Any ideas?

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!