Ignoring child element while triggering parent
I faced interesting problem. I'm using jquery mobile for my project, and i have footer with navbar inside. I wrote script to toggle it when i click/tap on it. But tap/click executes when i click on any element inside navbar, that is inside footer. I tried to use stopPropagation, but that disabled ajax page loading aswell. Is there any ways to ignore element only for certain script?
Here is example of my code:
- <div data-role="footer" data-id="main_footer" data-position="fixed" data-fullscreen="true" data-visible-on-page-show="false" data-tap-toggle="false" >
-
-
- <div data-role="navbar" data-iconpos="top" id="nav-bar">
- <ul>
- <li><a id="menu-item-home" data-icon="custom" href="index.html" class="ui-btn-active ui-state-persist"> </a></li>
- <li><a id="menu-item-near-me" data-icon="custom" href="near-me.html"> </a></li>
- <li><a id="menu-item-rewards" data-icon="custom" href="rewards.html"> </a></li>
- <li><a id="menu-item-invite" data-icon="custom" href="invite.html"> </a></li>
- <li><a id="menu-item-profile" data-icon="custom" href="profile.html"> </a></li>
- </ul>
- </div><!-- /navbar -->
- </div>
ANd here is my js:
- $("#index").live('pagecreate', function(e) {
- $(document).on("click", "[data-role='footer']", function(e) {
- if(e.target != this){
- return;
- }
- if ($("[data-role='footer']").hasClass('ui-fixed-hidden'))
- {
- $("[data-role='footer']").removeClass('ui-fixed-hidden');
-
- }
- else
- {
- $("[data-role='footer']").addClass('ui-fixed-hidden');
-
- }
- }); });
This almost works, but i want to make my footer not to hide when i click on link in navbar. Any ideas how to do this?