", { class: 'mybar', text: message, id: 'mymsg' }).hide().prependTo("body") "> ", { class: 'mybar', text: message, id: 'mymsg' }).hide().prependTo("body") "> ", { class: 'mybar', text: message, id: 'mymsg' }).hide().prependTo("body") " />

Скрыть панель уведомлений JQuery

Я использую jQuery для отображения уведомлений в верхней части моей веб-страницы. Я использую следующую функцию для отображения панели уведомлений -

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

И в $ (document) .ready (function() {) Я вызываю myBar («мое сообщение»); с соответствующим css. Он отображает панель как обязательный.

Теперь я хочу скрыть панель, когда вы нажимаете на панель. Для этого я стараюсь

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

Но это не работает как таковое. Любые предложения о том, что может быть неправильным?

0
nl ja de
См. jQuery $ (this) .remove() не работает после добавления
добавлено автор user2985029, источник

4 ответы

Если ваш div еще не существует, когда вы добавляете обработчик событий, набор jQuery $ ("# mymsg") пуст и никакой обработчик событий не добавляется.

Вместо этого вы можете использовать на :

$(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');
}
3
добавлено
Я думал о такой же проблеме, но не знал, как ее решить. Теперь он работает отлично. благодаря
добавлено автор PRYM, источник

Если ваш div еще не существует, когда вы добавляете обработчик событий, набор jQuery $ ("# mymsg") пуст и никакой обработчик событий не добавляется.

Вместо этого вы можете использовать на :

$(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');
}
3
добавлено
Я думал о такой же проблеме, но не знал, как ее решить. Теперь он работает отлично. благодаря
добавлено автор PRYM, источник

Когда страница загружается, элемент сообщения еще не существует в DOM, поэтому обработчик события клика не привязан к элементу.

Поскольку это, кажется, одноразовое сообщение, подумайте о привязке обработчика событий непосредственно к функции создания. Например:

function myBar(message) {
    $("<div />", {
        class: 'mybar',
        text: message,
        id: 'mymsg'
    }).hide().prependTo("body").slideDown('slow').click(function() {
        $(this).remove();
    });
}
1
добавлено
Спасибо за помощь!
добавлено автор PRYM, источник

Когда страница загружается, элемент сообщения еще не существует в DOM, поэтому обработчик события клика не привязан к элементу.

Поскольку это, кажется, одноразовое сообщение, подумайте о привязке обработчика событий непосредственно к функции создания. Например:

function myBar(message) {
    $("<div />", {
        class: 'mybar',
        text: message,
        id: 'mymsg'
    }).hide().prependTo("body").slideDown('slow').click(function() {
        $(this).remove();
    });
}
1
добавлено
Спасибо за помощь!
добавлено автор PRYM, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda