Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Why this event bubbling, please help!

    Hi,
    I am stuck with b/m code as click event is getting applied to child li too. B/m is my code.
    HTML :-
    Code:
    <div class="mobnavigation">
                	<ul class="mobmainnav">
                    	<li class="mobabout mobnavlist">
                        	<div class="colorbox"></div> 
                        	<a href="#">ABOUT </a>
                                <ul class="mobsubnav">
                                    <li><a href="#">The People</a></li>
                                    <li><a href="#">How we work</a></li>
                                    <li><a href="#">Why, What, Who</a></li>
                                </ul>
                        </li>
                        <li class="mobwork mobnavlist">
                        	<div class="colorbox"></div> 
                       		<a href="#">WORK</a>
                            	<ul class="mobsubnav">
                                    <li><a href="#">VODAF Careers</a></li>
                                    <li><a href="#">REG Careers</a></li>
                                    <li><a href="#">NC Careers</a></li>
                                </ul>
                        </li>
          </ul>
          </div>
    jQuery :-
    Code:
    if($(window).width() < 768){
    		// mobile version slidedown menu
    		$('.mobnavlist:has(>ul.mobsubnav)').click( function(event){
    			event.preventDefault();
    			if(!$(this).hasClass('isDown')){
    				$(this).children('a').css({'color':'#ffffff'});
    				$(this).find('.colorbox').animate({'width':'86.88%'},function(){$(this).siblings('ul.mobsubnav').slideDown();
    				 });
    				$(this).addClass('isDown');
    			} else{
    				$(this).find('ul.mobsubnav').slideUp(function(){$(this).siblings('.colorbox').animate({'width':'5.03%'},function(){$(this).siblings('a').css({'color':'#4E4E4E'});});
    				 });
    				$(this).removeClass('isDown');
    			}
    			return false;
    		});
    	}
    Click event is getting applied to ul.mobsubnav li too and ul.mobsubnav is sliding up. I want click event to be applied to li with class of mobnavlist which has a direct child ul.mobsubnav.
    Please help me with code.

    Thanks in advance.

    Bregds..........
    jag007
    Last edited by vinyl-junkie; 07-26-2013 at 02:58 AM. Reason: Corrected code tags

  • #2
    New Coder
    Join Date
    Jan 2013
    Location
    Sunnyvale, CA
    Posts
    98
    Thanks
    6
    Thanked 7 Times in 7 Posts
    I think that your issue is with :has. jQuery docs:
    Description: Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.
    I suggest that you modify your filter to something like...

    var nodes = $('li.mobnavlist').filter(function(){ if( $(this).children('ul.mobsubnav').length > 0 ) return true; });

    $(nodes).click( /*... do whatever ...*/ );

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    $('.mobnavlist:has(>ul.mobsubnav)') This looks very wrong. Im pretty sure you cannot start a selector with > like you have inside the :has() , doesnt make sense. I would guess the browser is interpreting this to mean, do this when user clicks on anything in .mobnavlist

    oh btw event.preventDefault() and return false are redundant


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •