jquery click function on mobile nav not working

Question

I am using the3 daisynav script for a site and have spent hours trying to figure out why the click function is not working, it works on the demo site they have. I am using WordPress and am using enque scripts, I have tried loading in the header and the footer to no avail. If someone could have a look and help me figure this out I would be very grateful. http://www.jamimariedesign.com/NewSite/

/*! DaisyNav v1.0.0 | (c) 2013 CircleWaves (support@circlewaves.com)
*/
(function(a,f,g,h){a.extend({daisyNav:function(){a("ul.menu-list li.has-submenu>a").append('<span class="menu-expand"></span>');a(".menu-toggle-button").click(function(){if(a(this).data("menu-id"))for(var b=a(this).data("menu-id").split(" "),e=b.length,c=0;c<e;c++){var d=b[c];d&&a("#"+d).toggleClass("show-for-devices")}else a("ul.menu-list").toggleClass("show-for-devices");a(this).toggleClass("active")});a(".menu-list .menu-expand").click(function(b){b.preventDefault();a(this).parent().next("ul").toggleClass("show-for-devices")})}})})(jQuery,
window,document);

/* Menu Styles */

/* Init Logic */
.menu-toggle-button {
    padding: 1em;
    border: 1px solid #000;
    cursor: pointer;
}
.menu-toggle-button {
    display: none;
}
.menu-toggle-button.active {
    border: 1px solid #777;
    color: #777;
}

ul.menu-list {
    list-style: none;
    position: relative;
    display: block;
    padding: 0px;
    margin: 0px;
    height: 100%;
    float: left;
}
ul.menu-list li {
    display: inline-block;
    position: relative;
}
ul.menu-list li a {
    display: inline-block;
}
ul.menu-list li a {
    display: block;
}

/* Handling Submenu */
ul.menu-list ul {
    display: none;
    padding: 0px;
    margin: 0px;
    position: absolute;
    top: 100%;
    left: 0%;
    list-style: none;
    z-index: 700
}
ul.menu-list ul li {
    position: relative;
    float: none;
    padding: 0px;
    margin: 0px;
}
ul.menu-list ul ul {
    position: absolute;
    top: 0%;
    left: 100%;
    z-index: 700
}
ul.menu-list li:hover>ul {
    display: inline-block;
}
/* End Init Logic */

/* Style */

ul.menu-list li:hover>ul {
    background: #fff!ie;
}

/* Fix for IE7 */

/* Submenu Expand Icon */
ul.menu-list li.has-submenu>a>span.menu-expand {
    font-size: 0.6em;
    float: right;
    padding-left: 10px;
    line-height: 2.2em;
}

/* All levels */
ul.menu-list li.has-submenu>a>span.menu-expand {
    float: none\9;
}

/* Fix for IE9 and below */
ul.menu-list>li.has-submenu>a>span.menu-expand {
}

/* Level 1 */
ul.menu-list>li.has-submenu>a>span.menu-expand:after {
    content: '\25BC'
}

/* Level 1 */
ul.menu-list li li.has-submenu>a>span.menu-expand {
}

/* Level 2 */
ul.menu-list li li.has-submenu>a>span.menu-expand:after {
    content: '\25BA'
}

/* Level 2 */

/* You can manage with of elements by width of a-tag */
ul.menu-list li a {
    color: #686868;
    text-decoration: none;
    padding: 5px;
}

/* All levels */
ul.menu-list li>a {
}

/* Level 1 */
ul.menu-list li li>a {
    width: 150px;
}

/* Level 2 */
ul.menu-list li li li>a {
}

/* Level 3 */

/* First Level*/
ul.menu-list>li {
    margin: 0px 10px 0px 0px;
    border: none;
    font-family: Lato;
    font-size: 1rem;
    display: block;
    position: relative;
    float: left;
    left: 50%;
}
ul.menu-list>li>a {
}
ul.menu-list>li:hover {
    background: none
}
ul.menu-list>li:hover>a {
    color: #aeaeae;
}
ul.menu-list>li>a:hover {
}
/* End First Level*/

/* Second Level*/
ul.menu-list>li>ul {
    border: 1px solid #eee;
}
ul.menu-list>li>ul>li {
    background: #f7f7f7;
}
ul.menu-list>li>ul>li>a {
}
ul.menu-list>li>ul>li:hover {
    background: #ddd;
}
ul.menu-list>li>ul>li:hover>a {
}
ul.menu-list>li>ul>li>a:hover {
}
/* End Second Level*/

/* Third Level*/
ul.menu-list>li>ul>li>ul {
    border: 1px solid #777;
}
ul.menu-list>li>ul>li>ul>li {
    background: #e7e7e7;
}
ul.menu-list>li>ul>li>ul>li>a {
}
ul.menu-list>li>ul>li>ul>li:hover {
    background: #ddd;
}
ul.menu-list>li>ul>li>ul>li:hover>a {
}
ul.menu-list>li>ul>li>ul>li>a:hover {
}
/* End Third Level*/

/* End Style */


/* End Menu Styles */


/* RESPONSIVE MEDIA QUERIES */
@media screen and (max-width: 768px) {
    
    /* Menu Styles */
    
    /* Init Logic */
    .menu-toggle-button {
        display:block;
    }
    .show-for-devices {
        display: block!important;
    }
    
    ul.menu-list {
        display: none;
    }
    ul.menu-list li {
        clear: both;
        float: none;
    }
    
    /* Handling Submenu */
    ul.menu-list ul {
        display: none;
        position: relative;
    }
    ul.menu-list ul li {
    }
    ul.menu-list ul ul {
        position: relative;
        top: 100%;
        left: 0%;
    }
    ul.menu-list li:hover>ul {
        display: none;
    }
    /* End Init Logic */
    
    /* Style */
    
    ul.menu-list li:hover>ul {
        background: #fff!ie;
    }

    /* Fix for IE7 */
    
    /* Submenu Expand Icon */
    ul.menu-list li.has-submenu>a>span.menu-expand {
        font-size: 0.6em;
        padding: 0.8em;
        line-height: 1em;
        position: absolute;
        right: 0;
        z-index: 700
    }

    /* All levels */
    ul.menu-list>li.has-submenu>a>span.menu-expand {
    }

    /* Level 1 */
    ul.menu-list li li.has-submenu>a>span.menu-expand {
    }

    /* Level 2 */
    ul.menu-list li li.has-submenu>a>span.menu-expand:after {
        content: '\25BC';
    }

    /* Level 2 */
    
    /* You can manage with of elements by width of a-tag */
    ul.menu-list li a {
        color: #333;
        position: relative
    }

    /* All levels */
    ul.menu-list li>a {
    }

    /* Level 1 */
    ul.menu-list li li>a {
        width: auto;
    }

    /* Level 2 */
    ul.menu-list li li li>a {
    }

    /* Level 3 */
    
    /* First Level*/
    ul.menu-list>li {
        margin: 0px;
        border: none;
        border-bottom: 1px solid #000;
    }
    ul.menu-list>li>a {
    }
    ul.menu-list>li:hover {
        background: #000
    }
    ul.menu-list>li:hover>a {
        color: #fff;
    }
    ul.menu-list>li>a:hover {
    }
    /* End First Level*/
    
    /* Second Level*/
    ul.menu-list>li>ul {
        border: none;
    }
    ul.menu-list>li>ul>li {
        padding-left: 5px;
    }
    ul.menu-list>li>ul>li>a {
    }
    ul.menu-list>li>ul>li:hover {
        background: #ddd;
    }
    ul.menu-list>li>ul>li:hover>a {
    }
    ul.menu-list>li>ul>li>a:hover {
    }
    /* End Second Level*/
    
    /* Third Level*/
    ul.menu-list>li>ul>li>ul {
        border: none;
    }
    ul.menu-list>li>ul>li>ul>li {
        padding-left: 5px;
    }
    ul.menu-list>li>ul>li>ul>li>a {
    }
    ul.menu-list>li>ul>li>ul>li:hover {
        background: #ddd;
    }
    ul.menu-list>li>ul>li>ul>li:hover>a {
    }
    ul.menu-list>li>ul>li>ul>li>a:hover {
    }
    /* End Third Level*/
    
    /* End Style */
    
    
    /* End Menu Styles */

}

<!-- Toggle button for menu, you can place it anywhere -->
<div class="menu-toggle-button" data-menu-id="menu-id-1">≡</div>

<!-- Menu Structure -->
<ul class="menu-list" id="menu-id-1">
  <li><a href="#">home</a></li>
  <li><a href="#">weddings</a></li>
  <li><a href="#">portraits</a></li>
  <li class="has-submenu">
    <a href="#">info</a>
    <ul class="sub-menu">
      <li><a href="#">investment</a></li>
      <li><a href="#">kind words</a></li>
      <li><a href="#">about me</a></li>
      <li><a href="#">bucket list</a></li>
     </ul>
  </li>
      <li><a href="#">blog</a></li>
      <li><a href="#">contact</a></li>
</ul>

also to point out, this works here http://demo.circlewaves.com/daisynav/ with the same code. — WP Brian, Oct 04 '15 at 16:45
Perhaps http://stackoverflow.com/questions/22015908/onclick-not-working-on-mobile-touch — mplungjan, Oct 04 '15 at 16:48
I think it is because you need to call jQuery.daisyNav(); somewhere in your code to actually trigger the function defined in your first snippet of code. — Phil, Oct 04 '15 at 17:26
this is being called from the enque_script function that calls the daisynav js file... — WP Brian, Oct 05 '15 at 17:59

score 0 · Answer 1 · answered Oct 05 '15 at 14:29

0

Please use vclick event for mobile version. Like this:

    $( document ).on( "vclick", ".menu-toggle-button", function() {
      Your code here:
      });

answered Oct 05 '15 at 14:29

Atif Tariq

2,650
27
34

in relation to the full code where would that go exactly? – WP Brian Oct 05 '15 at 16:35

jquery click function on mobile nav not working

1 Answers1