Links/icons that are generated in codebehind aren't showing up on certain mobile devices

Question

UPDATE:

I decided to test if it was an issue with fontawesome, so I replaced the icons with plain text:

<a href=\"javascript:void(0)\" onclick=\"expandMenu($(this))\" class=\"show-second-level toggle\"><span>V</span></a><a href=\"javascript:void(0)\" onclick=\"retractMenu($(this))\" class=\"hide-second-level toggle\"><span>^</span></a>

The plain text links are showing up on all devices now and are working in Android, but they aren't working on the iPad (clicking them does nothing).

---

I have a collapsible menu on my site. In my ul, I have categories listed with a little caret link (fontawesome) next to them open/close the inner menu. This is how it looks on my iPhone:

Menu on my iPhone

Expanded menu

The red border is on the 'a' tag, so the entire area inside the red border should expand the menu when clicked. It does this as expected on all desktop browsers and my iPhone. However, my client is reporting that it doesn't work on an iPad, MS Surface Pro, or Android phone. There are different problems on each. I put the red border around the expand links to see whether the links were showing up in the right place. On tablet, the red border is there but the arrow links are missing. Tapping the area where they should be does nothing. On Android, the red border isn't showing up at all, and again, tapping in the area does nothing.

This is the code that generates these menu items:

<ul>
    <asp:Repeater ID="MenuRepeater" runat="server" OnItemDataBound="MenuRepeater_ItemDataBound">
        <ItemTemplate>
            <li <%# (Container.DataItem as LinkData).Class %>>
                <asp:HyperLink ID="MenuHyperLink" runat="server">

                </asp:HyperLink>

                <%# (Container.DataItem as LinkData).ExpandLinks %>       

                <ul>
                    <asp:Repeater DataSource='<%# DataBinder.Eval(Container.DataItem, "SubLinks") %>' runat="server">
                        <ItemTemplate>
                            <li <%# (Container.DataItem as LinkData).Class %>>
                                <a href='<%# DataBinder.Eval(Container.DataItem, "Link") %>'><%# DataBinder.Eval(Container.DataItem, "Text") %></a>
                            </li>
                        </ItemTemplate>

                    </asp:Repeater>
                </ul>
            </li>
        </ItemTemplate>
    </asp:Repeater>

</ul>

The ExpandLinks are what generate the arrows. I have them placed in dynamically because not all menu items are expandable, so the code only puts an expand link in place if the item has a sub menu. Here is the code that generates the menus. The "if" statement is the condition that creates an expandable menu; the "else" creates a basic link with no child menu. The important part here is where tempLD.expandLinks is defined.

foreach (var item in sections)
{
    // if we have more than on section, that means we have expandable categories
    if (sections.Count() > 1 && item != sections.First()) // for second item and on
    {
        tempLD = new LinkData();
        tempLD.Text = item.SectionTitle;
        tempLD.Class = "class=\"category expandable\"";
        autoData.Add(tempLD);

        if (item.Link != null && item.Link.Any())
        {
            // special case for first-level items:
            if (item.Link.Count() == 1 && item.Link.FirstOrDefault().a.OuterXML == item.SectionTitle)
            {
                tempLD.Link = item.Link.FirstOrDefault().a.href;
                tempLD.Class = "class=\"\"";
            }

            else
            {
                tempLD.ExpandLinks =
                    "<a href=\"javascript:void(0)\" onclick=\"expandMenu($(this))\" class=\"show-second-level toggle\"><i class=\"fa fa-caret-down\"></i></a><a href=\"javascript:void(0)\" onclick=\"retractMenu($(this))\" class=\"hide-second-level toggle\"><i class=\"fa fa-caret-up\"></i></a>";
                var subLinks = new List<LinkData>();
                foreach (var child in item.Link)
                {
                    var subLink = new LinkData();
                    subLink.Text = child.a.OuterXML;
                    subLink.Link = child.a.href;
                    subLink.Class = "class=\"category-child\"";
                    subLink.SubLinks = new List<LinkData>();

                    subLinks.Add(subLink);
                }
                tempLD.SubLinks = subLinks;
            }
        }
    }

    else
    {
        tempLD = new LinkData();
        tempLD.Text = item.SectionTitle;
        tempLD.Class = "class=\"sub-parent\"";
        tempLD.SubLinks = new List<LinkData>();
        autoData.Add(tempLD);

        if (item.Link != null && item.Link.Any())
        {
            foreach (var child in item.Link)
            {
                tempLD = new LinkData();
                tempLD.Text = child.a.OuterXML;
                tempLD.Link = child.a.href;
                tempLD.Class = "class=\"\"";
                tempLD.SubLinks = new List<LinkData>();
                autoData.Add(tempLD);
            }
        }
    }
}

I figure this must be a CSS or javascript issue, but I don't know what's going wrong

Here is the HTML that is rendered:

<ul>
    <li class="active">
        <a id="ctl00_MainContentPH_SideBreadcrumb_MenuRepeater_ctl00_MenuHyperLink" href="/Our-Services/">Our Care</a>
       <ul></ul>
   </li>
   <li class="sub-parent">
       <span>Specialty Care and Programs</span>
       <ul></ul>
   </li>
   <li class="category expandable">
       <span>Programs and Clinics</span>
       <a href="javascript:void(0)" onclick="expandMenu($(this))" class="show-second-level toggle"><i class="fa fa-caret-down"></i></a><a href="javascript:void(0)" onclick="retractMenu($(this))" class="hide-second-level toggle"><i class="fa fa-caret-up"></i></a>
       <ul>
           <li class="category-child">
               <a href="/Our-Services/Programs-and-Clinics/Birthmark-Treatment-Program/">Birthmark Treatment Program</a>
           </li>
           <li class="category-child">
               <a href="/Our-Services/Programs-and-Clinics/Cancer-and-Blood-Disorders-Center/">Cancer and Blood Disorders Center</a>
           </li>
           <li class="category-child">
               <a href="/Our-Services/Programs-and-Clinics/Craniofacial-Reconstruction-Program/">Craniofacial Reconstruction Program</a>
           </li>
       </ul>
   </li>
   <li class="category expandable">
       <span>Rehabilitative Services and Therapy</span>
           <a href="javascript:void(0)" onclick="expandMenu($(this))" class="show-second-level toggle"><i class="fa fa-caret-down"></i></a><a href="javascript:void(0)" onclick="retractMenu($(this))" class="hide-second-level toggle"><i class="fa fa-caret-up"></i></a>
           <ul>
               <li class="category-child">
                   <a href="/Our-Services/Rehabilitative-Services-and-Therapy/Occupational-Therapy/">Occupational Therapy</a>
               </li>
               <li class="category-child">
                   <a href="/Our-Services/Rehabilitative-Services-and-Therapy/Physical-Therapy/">Physical Therapy</a>
               </li>
               <li class="category-child">
                   <a href="/Our-Services/Rehabilitative-Services-and-Therapy/Specialty-Therapy-Services/">Specialty Therapy Services</a>
               </li>
           </ul>
       </li>
       <li class="last  ">
           <a id="ctl00_MainContentPH_SideBreadcrumb_MenuRepeater_ctl04_MenuHyperLink" href="/Our-Doctors/Medical-Specialists/">Medical Specialists</a>
           <ul></ul>
       </li>
   </ul>

Answer 1

Please try following solution.Anchor tag onclick="return expandMenu($(this))" and in javascript function at the end of the function write return true.

 tempLD.ExpandLinks =
                    "<a href=\"javascript:void(0)\" onclick=\"return expandMenu($(this))\" class=\"show-second-level toggle\"><i class=\"fa fa-caret-down\"></i></a><a href=\"javascript:void(0)\" onclick=\"return retractMenu($(this))\" class=\"hide-second-level toggle\"><i class=\"fa fa-caret-up\"></i></a>";


function expandMenu(ele)
{

// Your code goes here


return true;

}

function retractMenu(ele)
{

// Your code goes here


return true;

}