3

Ребят, привет. Не срабатывает закрытие динамически созданного блока.

Подскажите, как правильно здесь реализовать?

$('document').ready(function() {

  $('body').on('click', '.em-panel-close', function() {
    $(this).parent('.edit-me-panel').remove();

    // В консоли клик виден, но remove() не выполняется
    console.log($(this).parent());
  });

  $('.edit-me').on('click', function(e) {

    // Здесь создаем элемент
    $(this).append('<div class="edit-me-panel"><div class="em-panel-close">Закрыть</div></div>');

    // Здесь children() срабатывает нормально, хотя тот же элемент.
    if ($(this).hasClass('edit-me-bg')) {
      $(this).children('.edit-me-panel').append('Редактируем фон');
    } else {
      $(this).children('.edit-me-panel').append('Не редактируем фон');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper edit-me edit-me-bg">Click me</div>

7
  • Что-то мне подсказывает, что $(this).parent('.edit-me-panel') и $(this).parent() это несколько разные вещи
    – andreymal
    3 окт 2017 в 15:16
  • @andreymal, Не, тут в другом ошибка: всплытие события клика
    – Grundy
    3 окт 2017 в 15:17
  • Консоль в обоих случаях выдает одно и то же. И remove() не срабатывает в обоих случаях. 3 окт 2017 в 15:19
  • @Grundy если всплытие отключить, то все равно не удаляется. Но по сути всплытие дает только повторное добавление элементов при клике на закрытие
    – teran
    3 окт 2017 в 15:25
  • @ДанилСысоев, remove срабатывает, просто сразу добавляется еще один элемент
    – Grundy
    3 окт 2017 в 15:30

2 ответа 2

2

Создаваемый элемент с классом edit-me-panel лежит внутри элемента edit-me, поэтому при клике на edit-me-panel сначала срабатывает ее обработчик клика, и удаляет элемент, затем событие всплывает и выполняется обработчик клика edit-me и заново добавляет элемент, поэтому кажется, что ничего не удалялось.

Для предотвращения этого, можно воспользоваться Event.stopPropagation, что запретит всплытие. Но в данном случае этого недостаточно, так как обработчик закрытия висит на самом деле на элементе body, это означает, что он выполняется после обработчика открытия, и делать отмену всплытия уже поздно.

Для решения нужно уменьшить путь до элемента, на который вешать обработчик закрытия, например повесив его так же на edit-me

Например:

$('document').ready(function() {

  $('.edit-me').on('click', '.em-panel-close', function(e) {
    e.stopPropagation(); // останавливаем всплытие
    $(this).parent('.edit-me-panel').remove();
    // В консоли клик виден, но remove() не выполняется
    console.log('close click');
  });

  $('.edit-me').on('click', function(e) {
    console.log('edit click');
    // Здесь создаем элемент
    $(this).append('<div class="edit-me-panel"><div class="em-panel-close">Закрыть</div></div>');

    // Здесь children() срабатывает нормально, хотя тот же элемент.
    if ($(this).hasClass('edit-me-bg')) {
      $(this).children('.edit-me-panel').append('Редактируем фон');
    } else {
      $(this).children('.edit-me-panel').append('Не редактируем фон');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper edit-me edit-me-bg">Click me</div>

Альтернативное решение: вешать обработчик непосредственно на создаваемый элемент

$('document').ready(function() {

  $('.edit-me').on('click', function(e) {
    console.log('edit click');
    // Здесь создаем элемент
    $('<div class="edit-me-panel"><div class="em-panel-close">Закрыть</div></div>').find('.em-panel-close').click(function(e) {
        e.stopPropagation(); // останавливаем всплытие
        $(this).parent('.edit-me-panel').remove();
        console.log('close click');
      })
      .end()
      .appendTo(this);

    // Здесь children() срабатывает нормально, хотя тот же элемент.
    if ($(this).hasClass('edit-me-bg')) {
      $(this).children('.edit-me-panel').append('Редактируем фон');
    } else {
      $(this).children('.edit-me-panel').append('Не редактируем фон');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper edit-me edit-me-bg">Click me</div>

2
  • Понял, и правда, внимательность подвела. Спасибо большое. А за альтернативный вариант, отдельное спасибо =) Без наводки сам так бы вряд ли написал =) 3 окт 2017 в 15:35
  • @ДанилСысоев, здесь скорее не внимательность, а неочевидность того, какой обработчик когда выполняется, в общем случае для делегированных событий лучше навешивать обработчики на один контейнер, тогда они будут выполняться в порядке добавления
    – Grundy
    3 окт 2017 в 15:37
0

Должно удаляться то, что создается при клике?

$('document').ready(function() {

  $('body').on('click', '.em-panel-close', function() {
    $('.em-panel-close').parent().remove();

    // В консоли клик виден, но remove() не выполняется
    console.log($(this).parent());
  });

  $('.edit-me').on('click', function(e) {

    // Здесь создаем элемент
    $(this).append('<div class="edit-me-panel"><div class="em-panel-close">Закрыть</div></div>');

    // Здесь children() срабатывает нормально, хотя тот же элемент.
    if ($(this).hasClass('edit-me-bg')) {
      $(this).children('.edit-me-panel').append('Редактируем фон');
    } else {
      $(this).children('.edit-me-panel').append('Не редактируем фон');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper edit-me edit-me-bg">Click me</div>

7
  • Да, сейчас работает так как нужно. А Вы что-то еще изменяли кроме содержимого метода parent? 3 окт 2017 в 15:31
  • Плохое решение, так как если на странице будет несколько элементов с .em-panel-close то удалятся все, а не только тот, по которому кликнули
    – Grundy
    3 окт 2017 в 15:33
  • @ДанилСысоев только 4 строку изменил. Работает для этой конкретной задачи.
    – n3r0bi0m4n
    3 окт 2017 в 15:33
  • 1
    @Grundy возможно я неправильно мыслю, но зачем сначала создавать элемент, потом искать его? Можно ведь при создании элемента добавить его в какой-нибудь объект (или массив), потом просто удалить нужный?
    – n3r0bi0m4n
    3 окт 2017 в 15:36
  • @n3r0bi0m4n не понял вопроса
    – Grundy
    3 окт 2017 в 15:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.