mmenu不会触发onclick事件

Question

I am using the mmenu jquery plugin ( http://mmenu.frebsite.nl/ ). When clicking on items on the menu it doesnt trigger my onclick event. Any ideas why this could be happening would be much appreciated.

<nav id="menu">
    <ul>
        <li>
            <span id="showScanDataBtn">
                <i class="menu-icon fa fa-leaf"></i> Scan Data
            </span>
        </li>
        <li>
            <span id="showPickingBtn">
                <i class="menu-icon fa fa-list"></i> View Picking
            </span>
        </li>
        <li>
            <span id="logoutBtn">
                <i class="menu-icon fa fa-power-off"></i> Logout
            </span>
        </li>
    </ul>
</nav>

This is the javascript:

$(function () {
$("#showPickingBtn").click(function (e) {
        alert("Button Clicked!");
    });
});

I have also tried the exact same but with a tags instead just in case the span was causing the issue, but im having the same effect.

Answer 1

try with ...on('click', function...

 $(function () { $("#showPickingBtn").on('click', function (e) { alert("Button Clicked!"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav id="menu"> <ul> <li> <span id="showScanDataBtn"> <i class="menu-icon fa fa-leaf"></i> Scan Data </span> </li> <li> <span id="showPickingBtn"> <i class="menu-icon fa fa-list"></i> View Picking </span> </li> <li> <span id="logoutBtn"> <i class="menu-icon fa fa-power-off"></i> Logout </span> </li> </ul> </nav> 

Maybe you can use this as example so you just have to set the onclick event once and then inside check for id and do whatever you want with it...

 $(function () { $("#menu").find('li span').on('click', function (e) { if( $(this).attr('id') === 'showPickingBtn' ) { alert('CRAZY - ' + 'showPickingBtn' + ' has been clicked'); } else { alert($(this).attr('id') + ' has been clicked'); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav id="menu"> <ul> <li> <span id="showScanDataBtn"> <i class="menu-icon fa fa-leaf"></i> Scan Data </span> </li> <li> <span id="showPickingBtn"> <i class="menu-icon fa fa-list"></i> View Picking </span> </li> <li> <span id="logoutBtn"> <i class="menu-icon fa fa-power-off"></i> Logout </span> </li> </ul> </nav> 

Answer 2

How about this?

$("#showPickingBtn").on("click", function (e) {
    alert("Button Clicked!");
});

Answer 3

this code working for me

   $(document).ready(function() {
        $("#showPickingBtn").click(function (e) {
                alert("Button Clicked!");
            });
       });