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事件。

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

2 个答案: