jquery - 隐藏 Jquery 通知栏

Question

我正在使用 Jquery 在我的网页顶部显示通知。我正在使用以下功能来显示通知栏 -

function myBar(message) {
    $("<div />", { class: 'mybar', text: message, id: 'mymsg' }).hide().prependTo("body")
      .slideDown('slow');
}

在$(document).ready(function(){我myBar("my message");用适当的 css 调用 , 。它根据需要显示栏。

现在我想在单击栏时隐藏栏。为此，我正在尝试这个

$("#mymsg").click(function() {
     $(this).remove();
})

但这不是这样工作的。关于什么可能是错的任何建议？

Answer 1

如果添加事件处理程序时您的 div 尚不存在，则 jQuery 集$("#mymsg")为空且未添加任何事件处理程序。

您可以on改用：

$(document.body).on('click', "#mymsg", function() {
     $(this).remove();
});

或者，如果您愿意，可以在添加 div 时绑定事件：

function myBar(message) {
    $("<div />", { class: 'mybar', text: message, id: 'mymsg' }).click(function(){
       $(this).remove();
    }).hide().prependTo("body").slideDown('slow');
}

Answer 2

当页面加载时，消息元素在 DOM 中尚不存在，因此 click 事件处理程序未绑定到该元素。

由于这似乎是一次性消息，请考虑将事件处理程序直接链接到创建函数中。例如：

function myBar(message) {
    $("<div />", {
        class: 'mybar',
        text: message,
        id: 'mymsg'
    }).hide().prependTo("body").slideDown('slow').click(function() {
        $(this).remove();
    });
}