Search code examples
jquerypreventdefault

How to correctly assign jQuery .off('')

I have a two levels accordion menu for mobile view, and one of the menu item doesn't have child items. For those that have child items I declared e.preventDefault(); for the parent ul so that the menu can close, however it also affects the one without child items (Procedure) which I don't want.

I need to target the Procedure item so that it is click-able but not able to find the right way to do it. This is the code in question is jQuery("ul.sf-menu > li").off('click'); 

jQuery("ul.sf-menu > li > a").on("click", function(e){
    if(jQuery(this).parent().has("ul")) {
    e.preventDefault();
    jQuery("ul.sf-menu > li").off('click');
    }

Demo (please view it at or smaller than 800px): http://jsbin.com/ohocer/1/edit

Many thanks!

Solution

  • The problem is that .has() returns a jQuery collection, not a boolean value (see the docs at http://api.jquery.com/has/). You can check that the collection contains an element with:

    if (jQuery(this).parent().has("ul")[0]) {

    Alternatively, if you're going to preventDefault on the a tags, why not just remove the href attribute for the ones with children? You can then remove the preventDefault altogether.