隐藏 Jquery 通知栏

Question

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

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

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

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

$("#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();
    });
}