使用 jQuery .on() 方法不会在动态创建的元素上绑定事件

Question

我目前正在开发一个网站，该网站有一个注销按钮，只要窗口达到特定大小，该按钮就会动态插入到侧边栏中。当我点击注销按钮时，我想调用方法logOut();

我查看了这些其他帖子，但这些解决方案似乎对我不起作用。如果我在主页上单击该元素，则会调用该方法，但是当我调整窗口大小并且该元素被“重新添加”到网页时，它不会做任何事情（ID 选择器是正确的，因为风格就在那里）。

$(document).ready(function()
{
    $(document).on("click", "#btnLogOut", function()
    {
        logOut();
    });
});

我希望在单击锚标记后调用 logOut() 方法，但即使 .on() 方法应该处理动态创建的元素，它也不会做任何事情

编辑：这就是我在调整大小后将元素重新添加到页面的方式。包含注销锚标记的 nav 元素通过navList(); 方法制成列表，然后附加到正文。我确保指定注销按钮需要保留其 ID。只会添加与注销按钮相关的代码。

$.fn.navList = function() {

    var $this = $(this);
        $a = $this.find('a'),
        b = [];

    $a.each(function() {

        var $this = $(this),
            indent = Math.max(0, $this.parents('li').length - 1),
            href = $this.attr('href'),
            target = $this.attr('target');
        if($a.attr("id") === "btnLogOut") {
            console.log($a);
            b.push(
                '<a ' +
                    'id="btnLogOut" ' + 
                    'class="link depth-' + indent + '"' +
                    ( (typeof target !== 'undefined' && target != '') ? ' target="' + target + '"' : '') +
                    ( (typeof href !== 'undefined' && href != '') ? ' href="' + href + '"' : '') +
                '>' +
                    $this.text() +
                '</a>'
            );
        }

    });

    return b.join('');

};

            $(
                '<div id="navPanel">' +
                    '<nav>' +
                        $('#btns').navList() +
                    '</nav>' +
                '</div>'
            )
                .appendTo($body)

Answer 1

别担心， jQuery .on() 绝对 使用动态注入的元素。那么，是什么原因导致它在这种情况下无法正常工作？

首先，最常见的原因是：拼写和/或大写。您没有将其中一个字符大写吗？例如#btnLogOut与#btnLogout不一样

第二个同样常见的错误：页面上的 ID 重复。更改您想要的按钮的 ID 并再次测试 （将三个字符的后缀 _zq 添加到 ID 的末尾 - 一个不太可能的字符串后缀 - 并记住更改 HTML ID 和引用的 ID jQuery).

有时，您只需要更具体。尝试添加一些父 ID 和类，而不是 #btnLogOut。例如，如果这是您的结构：

<div class="row bob">
    <div class="container sam ed tom">
        <div class="dialog frank lg pc6">
            <div class="dlg-bottom">
                <button id="btnLogOut">Log Out</button>

然后做你的 jQuery 语句：

$(document).on('click', '.row .container .dialog .dig-bottom #btnLogOut', function(){
    //code goes here
});

如何测试你所拥有的：

按钮已添加到页面并在屏幕上可见的位置：

1. 右键单击按钮，从弹出菜单中选择Inspect Element

2. Chrome 的 DevTools 将打开

3. 如果控制台在 DevTools 窗口的下半部分不可见，请按 Esc

4. 在控制台输入区，输入：$('#btnLogOut').length

您应该会在该行下方看到数字 1。

如果您收到消息Uncaught TypeError: $ is not a function，那么您应该首先inject jQuery into DevTools 并再次尝试第4 步。