使用jQuery .on（）方法不适用于动态创建的元素

Question

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

锚标签的ID到处都是“btnLogOut”（甚至通过在我的IDE中搜索来检查它，以防有任何不可见的字符或其他东西）。

每页上始终只有一个注销锚标记。 可以肯定的是，我用“btnLogOut_zq”替换了“btnLogOut”，并且错误仍然存​​在。

我使用了setInterval(function(){ console.log($("#btnLogOut").length); },1); 并且这会在调整窗口大小并使其变大然后变小等时不断返回1，因此元素始终存在于页面上。

使用.on()方法检测单击然后调用logOut(); 方法

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

这是我用来获取原始锚标记并将其放在侧边栏中（仅与注销按钮相关的部分）：

$.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>'
)

Answer 1

按字符串创建元素不会在DOM内“实例化”它们。 要解决这个问题，你必须通过DOM的Javascript API（或DOM加载前的服务器端元素呈现，EG：HTML文件）来创建元素。

虽然有几种方法可以做到这一点，但这是jQuery的一个很好的例子：

b.push(
    $('<a />', {id:"btnLogout", class: "link depth-1", target:"_BLANK", "href":"HTTP://", "text":$this.text()})
);

假设b是一个现有的数组，它将被附加到另一个元素或迭代。

了解有关在Mozilla文档上以“正确”方式创建元素的更多信息： https ： //developer.mozilla.org/en-US/docs/Web/API/Document/createElement

编辑：

为了进一步向下筑巢：

$('<div />', {id: 'navPanel'}).append(
    $('<nav />', html: $("#btns").navList())
);

如果您有权访问ES6，那么您可以使用模板文字：

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

我不确定语法是否会与jQuery简写美元符号冲突。

Answer 2

刚刚放：

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

在$(document).ready

小心，因为通过查看您的HTML页面代码，您有两次ID #btnLogOut 。

编辑1：

看看我创建的这个JSFiddle ，以便向您展示即使是动态创建的元素也附加了onclick事件。