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

隐藏Jquery通知栏

2 个答案: