Question

我正在加载一个按钮和一个动态附加的菜单，具体取决于屏幕大小，加载工作以及所有内容，但是当我尝试为菜单中的一个列表项委派点击事件时，它无法正常工作。我发现这很奇怪，因为按钮的授权工作完美。我有一个单独的PHP文件中的按钮和另一个PHP文件中的菜单，并通过AJAX调用加载它们。

这是按钮：

<button id="mobile-nav-btn"><img src="img/threestripes.png"></button>

当您点击按钮时，这是滑入的菜单：

<div id="mobile-nav-container">
    <nav>
        <ul id="mobile-main-nav">
            <li class="main-nav-items nav-items"><a href="index.php">Startsida</a></li>
#services --> <li id="services" class="main-nav-items nav-items" data-toggle="dropdown"><a href="#">Tjänster</a>
                <ul class="sub-nav-menu">
                    <li class="sub-nav-items"><a href="#">Fransar</a></li>
                    <li class="sub-nav-items"><a href="#">Hår</a></li>
                    <li class="sub-nav-items"><a href="#">Sminkning</a></li>
                </ul>
            </li>
            <li class="main-nav-items nav-items"><a href="#">Portfolio</a></li>
            <li class="main-nav-items nav-items"><a href="#">Boka tid</a></li>
            <li class="main-nav-items nav-items"><a href="#">Prislista</a></li>
        </ul>
    </nav>
</div>

委派按钮（有效）：

$('#main-nav-container').on('click', '#mobile-nav-btn', function() {

    if ($('#mobile-nav-container').is(':hidden')) {
        $('#mobile-nav-container').stop().show().animate({left: 0}, 'slow');
    }
    else {
        $('#mobile-nav-container').stop().animate({left: -150}, 'slow', function() {
            $('#mobile-nav-container').hide();
        });
    }
});

委派服务列表项，但不起作用：

$('#mobile-main-nav').on('click', '#services', function() {
    $('#services ul').stop().slideToggle();
});

#mobile-main-nav加载时有display: none;，我不知道是否与它有任何关系，但实际上不应该这样做。我很难过，为什么这不起作用所以，如果你们中的任何人都知道，那就让我知道。

事件委托用于动态添加按钮，但不适用于附加到其上的动态添加菜单

0 个答案: