I was creating an application with fixed header and footer using jquery mobile.
I placed anchor links in fixed footer, in one of my page there is a big form which has got more buttons and select drop-downs.
When user clicks on an anchor link in footer, if there is any component behind that link - that is firing instead of this event.
As per my understanding this would might be because of low z-index
value.
Updated with more information:
1 - I have a fixed footer with data-position="fixed". In that, I have four links where it helps user to navigate through the application.
2 - The links which are present in Footer works fine when there is a plain page with some text.
3 - I have a scenario like, when user is on complex form, if we have a situation like when footer is upon select box/button - the links on footer is not clickable, when we user clicks on a link, the select box/button event is firing instead of footer anchor links onclick event.
<div data-role="footer" data-position="fixed" data-theme="b" data-tap-toggle="false">
<div data-role="navbar">
<ul>
<li class='Link1Class'><%: Html.ActionLink("Link1", "Link1Display", "Link1Data", null, htmlAttributes: new { data_icon = "Link1"})%></li>
<li class='Link2Class'><%: Html.ActionLink("Link2", "Link1Display", "Link2Data", null, htmlAttributes: new { data_icon = "Link2"})%></li>
<li class='Link3Class'><%: Html.ActionLink("Link3", "Link1Display", "Link3Data", null, htmlAttributes: new { data_icon = "Link3"})%></li>
<li class='Link4Class'><%: Html.ActionLink("Link4", "Link1Display", "Link4Data", null, htmlAttributes: new { data_icon = "Link4"})%></li>
</ul>
</div><!-- /navbar -->
</div>