mmenu 不会触发 onclick 事件答案

【问题标题】：mmenu doesnt fire onclick eventmmenu 不会触发 onclick 事件
【发布时间】：2015-03-12 04:23:23
【问题描述】：

我正在使用 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!");
    });
});

我也尝试过完全相同的方法，但使用标签代替，以防跨度导致问题，但我具有相同的效果。

【问题讨论】：

您是否尝试在文档准备好时加载您的 JS？ $(document).ready(function() {}
是的，JS 正在加载 document.ready $(function(){... 是同一件事的简写 ($( document ).ready(function() {...)跨度>
似乎在小提琴中工作正常。您的浏览器是否在控制台中显示了其他一些 javascript 错误？
@caramba 指出，我会确保采纳您的建议。谢谢你:)

标签： javascript jquery onclick mmenu

【解决方案1】：

这个怎么样？

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

【讨论】：

感谢您的评论，它真的很有用！我现在已更改为 ..on("click", function(e)){... 正如您所建议的那样，它确实可以工作一段时间。但是我认为这可能与我在我的 onclick 事件中显示和隐藏面板的事实有关。当它停止工作时，如果我刷新页面，它会再次启动一段时间，直到几次显示/隐藏后它再次停止......
@ErikaDanis 听起来确实有些其他代码可能与此发生冲突。但是，我无法知道这一点或什么！我只能建议发布更多代码或在控制台停止工作时查看特定错误。
经过更多测试，即使是我的一个面板正文中的标准显示选择也不会触发 onclick 事件。也许这与我的页面首次加载时它们最初隐藏的事实有关？

【解决方案2】：

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

【讨论】：

感谢您的评论，更改为 ..on('click', function (e) {.. 事件确实有帮助，但经过几次显示/隐藏后，它仍然没有达到预期的效果不同的面板。可能是因为在页面首次加载时面板最初是隐藏的？
@ErikaDanis 是的，如果元素被隐藏或稍后通过 ajax 加载，.on('click' 也可以工作。如果您对显示/隐藏有其他问题，但不能按预期工作，您必须发布一个显示相关代码位的新问题，如果不了解更多关于您的代码的功能和您真正想要的内容，就无法做出回应。..

【解决方案3】：

这段代码对我有用

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

【讨论】：