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