javascript - 单击按钮时菜单不会滑出

Question

我有一个菜单，当我点击一个按钮时，它应该会在移动设备上滑出，但它不再工作，因为我做了它，所以菜单和按钮是通过 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 getPhpFile(filename, selector, method) {

    $.ajax({
        url : "includes/" + filename + ".php",
        type: "POST",
        success: function(data, textStatus, jqXHR) {

            appendToHtml(data, selector, method);
        },
        error: function (jqXHR, textStatus, errorThrown){
            console.log('Unable to get the requested files.');
        }
    });
}

将抓取文件中的数据添加到 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();
        });
    }
});

由于某种原因，我已将搜索范围缩小到无法找到 #mobile-nav-btn 的事实。这是因为当我使用按钮以外的其他东西来触发滑动功能时，脚本实际上起作用了。我觉得这有点奇怪，因为当我检查控制台时按钮和菜单实际上在标记中，并且我不会运行脚本直到标记存在，因为它是通过单击事件触发的。我也尝试对滑动脚本使用 window.onload = init 但它什么也没做。一切都封装在 $(document).ready 函数中。我真的不知道如何解决这个问题，所以有什么关于我应该做什么的提示吗？

Answer 1

您正在尝试将您的事件绑定(bind)到一个不存在的元素。您可以使用事件委托(delegate)语法在导航按钮的父元素上使用事件委托(delegate):


$('父元素').on('点击','#mobile-nav-button', function(){ ....


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