CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobile
sanny Sin
sanny Sin

Reputation: 1555

Making click work only on parent item

I have footer with some content inside. ANd i made my footer show\hide on click. But now if i click on any item inside footer(i have navbar there) my footer reacting on show\hide aswell. How do i make only parent(footer) to react on clicks, and none of child elements? I'm using jquery mobile. Here is 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">
                    <ul>
                        <li><a id="menu-item-home" data-icon="custom" href="index.html" class="ui-btn-active ui-state-persist">&nbsp;</a></li>
                        <li><a id="menu-item-near-me" data-icon="custom" href="near-me.html">&nbsp;</a></li>
                        <li><a id="menu-item-rewards" data-icon="custom" href="rewards.html">&nbsp;</a></li>
                        <li><a id="menu-item-invite" data-icon="custom" href="invite.html">&nbsp;</a></li>
                        <li><a id="menu-item-profile" data-icon="custom" href="profile.html">&nbsp;</a></li>
                    </ul>
                </div><!-- /navbar -->
            </div>
            <!-- /footer -->
        </div>

And JS

$("#index").live('pagecreate', function() {
            $("[data-role='footer']").live("click", function() {
            if ($("[data-role='footer']").hasClass('ui-fixed-hidden'))
            {
                $("[data-role='footer']").removeClass('ui-fixed-hidden');
            }
            else
            {
                $("[data-role='footer']").addClass('ui-fixed-hidden');
            }

                });
        });

TLDR; I want to make links inside my footer to work, but not trigger footer to show\hide while click on link

Upvotes: 1

Views: 198

Answers (4)

codeVerine
codeVerine

Reputation: 762

So your problem is that , the link in the footer not works. The easiest solution for this, is bind a click event to the link inside your footer and use either $.mobile.changePage() or window.location() method to open the desired url. Add this to your code :

$("[data-role=footer] a").bind("click",function(){
    $.mobile.changePage($(this).attr("href"));
});

Upvotes: 0

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382464

You could add

 $(document).on("click", "[data-role='footer'] li", function(e) {
     e.stopPropagation();
 });

Note that I used on instead of live, which is deprecated. Note also that jQuery has a useful toggleClass function. So I'd suggest you replace your existing code with

$("#index").live('pagecreate', function() {
     $(document).on("click", "[data-role='footer'] li", function(e) {
        e.stopPropagation();
     });
     $(document).on("click", "[data-role='footer']", function() {
        $("[data-role='footer']").toggleClass('ui-fixed-hidden');
     });
});

Upvotes: 5

bipen
bipen

Reputation: 36551

this should work...i suggest u to use on instead on live...

$(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');
    }

 });

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191809

For a variety of reasons, you shouldn't actually use .live, but replace it with .on. Anyway, I think this will work:

... 'click', function (e) {
   if ($(e.target).not("[data-role=footer]")) {
      e.stopPropagation();
   }
});

Upvotes: 1

Related Questions