Question

我正在使用mmenu jquery插件（http://mmenu.frebsite.nl/）。单击菜单上的项目时，它不会触发我的onclick事件。任何想法为什么会发生这种情况将非常感激。

<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>

这是javascript：

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

我也尝试过完全相同但带有标签，以防万一因为跨度导致问题，但即时效果也一样。

Answer 1

尝试使用...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>

也许您可以将此作为示例使用，因此您只需设置onclick事件一次，然后在内部检查id并随意执行任何操作...

$(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

这个怎么样？

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

Answer 3

此代码为我工作

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

mmenu没有开火onclick事件

3 个答案: