javascript - jQuery - 设置 html() 后在 DOM 中注册一个元素

Question

我有一个 div，在单击按钮后我在其中设置了 innerHTML：

$('#headerDiv').html('Welcome [<a href=\'javascript:void(0);\' id=\'logout_button\'>Logout</a>]');

但是，新元素logout_button未在 中注册DOM，因此我无法使用传统的$('#logout_button').click().

是否可以logout_button在DOM使用该方法设置后立即注册html()？

谢谢！

Answer 1

委托活动

$('#headerDiv').on('click', '#logout_button', function() {
     // Your code
});

这将确保事件dynamically added通过事件冒泡的概念附加到元素。

Answer 2

如果委托不是您喜欢的，您可以在附加按钮之前将您的点击处理程序绑定到按钮。通过创建 DOM 元素并附加它们来做到这一点：

var btn = $('<a />').text('Logout').attr({
        "href": "javascript:void(0);",
        "id": "logout_button"
    }).click(function (e) {
        // do logout stuff
        e.preventDefault();
        return false;
    });
$('#headerDiv').append(btn);

这具有确保您向 DOM 添加有效元素的额外好处。