Javascript 单击按钮时菜单未滑出

我有一个菜单，当我点击一个按钮时，它应该会在移动设备上滑出，但它不再工作，因为我做了它，所以菜单和按钮是通过AJAX添加的，而不是直接在标记中添加的

代码如下：

检查当前屏幕（当前窗口）大小，并调用获取文件的函数：

var windowWidth = $(window).width(); //Will be screen.width later, using window for testing

if (windowWidth < 550) {

    getPhpFile('mobilemenu', '#main-nav-container', 'insertAfter');
    getPhpFile('mobmenuimg', '#main-nav-container', 'append');
}

将抓取文件中的数据添加到HTML：

function appendToHtml(data, selector, method) {
        var element = $('' + selector + '');

    switch (method) {
        ...
        //Some removed cases here
        ...
        case 'append': element.append(data); 
                        break;

        case 'insertAfter': $(data).insertAfter(element); 
                        break;
    }
}

这就是菜单滑出的原因：

$('#mobile-nav-btn').on('click', 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();
        });
    }
});

---

我已经缩小了搜索范围，因为某种原因，它找不到移动导航btn。这是因为当我使用按钮以外的其他东西来触发滑动功能时，脚本实际上可以工作。但我觉得这有点奇怪，因为当我检查控制台时，按钮和菜单实际上在标记中，并且我在标记出现之前不会运行脚本，因为它是通过单击事件触发的。我也尝试过在滑动脚本中使用

window.onload=init

，但没有任何效果。所有内容都封装在一个

$（文档）中。就绪

功能也可用。我真的被困在如何解决这个问题上了，所以有没有关于我应该做什么的提示？

您正在尝试将事件绑定到一个不存在的元素。您可以使用事件委派语法对nav按钮的父元素使用事件委派：

$（'parent-element'）。在（'click'，'#mobile nav button'，function（）{。。。。

---

或者您必须在将这些元素添加到DOM后绑定事件。

但是，在窗口完成加载后运行init函数不应该执行完全相同的操作吗？因为我会在所有其他操作完成后绑定事件。这对我来说没有意义您的按钮是异步加载的，没有？在fac之后加载任何内容如果你在window.load、document.ready和ajax调用的回调中放一个console.log，你就会明白我的意思了。啊，对了，忘了它是异步加载的。在使用ajax duh时有点明显。我会尝试修复它。我会亲自将事件绑定到回调中，因为我不确定你是否有家长可授权的目标。

$('#mobile-nav-btn').on('click', 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();
        });
    }
});