Jquery .remove () действует только при втором нажатии - PullRequest
Новая
       45

Jquery .remove () действует только при втором нажатии

0 голосов
/ 12 апреля 2020

Я создаю функцию уведомлений с bootstrap popover. Уведомление должно быть удалено после того, как пользователь нажмет на него, что интуитивно понятно. Однако для того, чтобы это сработало, требуется два щелчка - в первый раз ничего не происходит. Слушатель щелчков срабатывает оба раза, как было обнаружено с помощью alert ().

Я упростил свою задачу до самой основной c воспроизводимой формы в этой скрипке js: https://jsfiddle.net/ksun78/758n1azu/36/

$('body').on("click", ".popover-body .notif-popup-container", function() {
  $("#" + $(this).attr("id")).remove();
})

Размещение кода выше, потому что он не позволит мне отправить без фрагмента кода, хотя скрипка js должна иметь все, что вам нужно.

Может кто-то объясните, в чем может быть проблема и как ее исправить? Спасибо!

Ответы [ 4 ]

0 голосов
/ 13 апреля 2020

На сегодняшний день самое простое из известных мне решений - добавить trigger: focus к инициализации поповера: 

$(document).ready(function() {

  $("#notificationsBell").popover({
    title: $('.notifications-title-header').html(),
    html: true,
    placement: 'right',
    content: $(".notifications-list").html(),
    trigger: 'focus' // Here
  });

})
.media {
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
  cursor: pointer;
  align-items: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<a href="javascript:void(0);" class="dropdown-toggle" id="notificationsBell">
  <span id="notifUnreadCount">6</span>
</a>

<div style="display:none" class="notifications-title-header">
    Notifications
</div>

<div style="display:none" class="notifications-list">

  <div class="media notif-popup-container" id="notif1">
      <p>Transaction 1</p>
  </div>
  
  <div class="media notif-popup-container" id="notif2">
      <p>Transaction 2</p>
  </div>

</div>
0 голосов
/ 13 апреля 2020

Если вы просто хотите удалить этот div, вы можете использовать следующий код: 

$(document).on("click", ".notif-popup-container", function() {
  $(this).remove();
});
0 голосов
/ 13 апреля 2020

Оказывается, что за кулисами popover сделает копию элементов и отобразит их. Это означает, что использование ТОЛЬКО идентификатора для удаления элементов не будет работать, потому что сначала будет удалено отображение: ни один элемент на странице, а затем копия того, который отображается во всплывающем окне. Спасибо @Gabriel за указание на это.

Решение здесь состояло в том, чтобы просто не использовать атрибут id элемента, поскольку это было ненужным. Простой $ (this) .remove () сделает свое дело.

Что касается вопроса о дублированных идентификаторах: я изначально намеревался хранить идентификатор уведомления в атрибуте «data-id». Однако получение «data-id» с использованием jquery возвращало undefined, поэтому я выбрал атрибут «id». Возможно, @Gabriel может дать некоторое представление о том, что «data-id» не определен, так как это похоже на проблему, связанную с popover.

0 голосов
/ 13 апреля 2020

Мне кажется, проблема в том, что библиотека popover клонирует ваши элементы, поэтому есть два элемента с одинаковыми идентификаторами. Вы можете изменить свой код так, чтобы он работал, но лучше избегать идентичных идентификаторов 

$('body').on("click", ".popover-body .notif-popup-container", function() {
  $(`[id="${$(this).attr("id")}"]`).remove();
})
...