Как переместить элемент, переместиться из одного div в другой и получить возможность вернуться в main div

Question

Моя цель - переместить элемент в другой div и, если затем, иметь возможность вернуться в его основной div.Это мой HTML

$('.low-filter-tags a.low-filter-label').click(function () {
        $(this).clone().appendTo($('.low-filter-search'));
        $(this).remove();
    });
    $('.low-filter-search a.low-filter-label').click(function () {
        $(this).clone().appendTo($('.low-filter-tags'));
        $(this).remove();
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="low-filter">
        <div class="low-filter-tags">
            <a class="low-filter-label">
                Mobile
                <i class="fa fa-times"></i>
            </a>
            <a class="low-filter-label">
                Smartphone
                <i class="fa fa-times"></i>
            </a>
            <a class="low-filter-label">
                Laptop
                <i class="fa fa-times"></i>
            </a>

        </div>
        <div class="low-filter-search">
            
        </div>
    </div>

Первый шаг работает нормально, но если я хочу переместить элемент с low-filter-search на low-filter-label, он даже не обнаруживает событие щелчка.

Я пытаюсь создать «поиск / фильтр» с помощью этих кнопок (элемент a), который будет показывать или скрывать какой-либо элемент, если пользователь выбрал его.Может быть, вы знаете какую-либо библиотеку, и это можно сделать проще.Спасибо

Answer 1

Я думаю, вам понадобятся «делегированные события», чтобы можно было обрабатывать клики по элементам, которые не существовали, когда был объявлен исходный обработчик событий. Обычно обработчик событий присоединяется только к тем элементам, которые действительно присутствуют, и соответствуют селектору.когда обработчик создан.Очевидно, что ваши перемещенные элементы не соответствуют этим критериям.

При использовании делегированных событий эта проблема устранена, поскольку событие присоединено к элементу выше DOM, который, как вы знаете, будет существовать всегда.Затем вы сообщаете jQuery, что он фактически выполняет обратный вызов только в том случае, если выясняется, что основная цель события соответствует второму селектору (указанному в параметрах функции).Это оценивается во время возникновения события, а не при первом создании обработчика события.

Демо:

$(".low-filter-tags").on("click", "a.low-filter-label", function() {
  $(this).detach().appendTo($('.low-filter-search'));
});
$(".low-filter-search").on("click", "a.low-filter-label", function() {
  $(this).detach().appendTo($('.low-filter-tags'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="low-filter">
  <div class="low-filter-tags">
    <a class="low-filter-label">
                Mobile
                <i class="fa fa-times"></i>
            </a>
    <a class="low-filter-label">
                Smartphone
                <i class="fa fa-times"></i>
            </a>
    <a class="low-filter-label">
                Laptop
                <i class="fa fa-times"></i>
            </a>

  </div>
  <div class="low-filter-search">

  </div>
</div>

Подробнее см. https://api.jquery.com/on/ в разделе, озаглавленном «Прямые и делегированные обработчики событий».

PS Вы неТ действительно нужно клонировать, а затем удалить элемент.Вместо этого вы можете просто отсоединить его и повторно прикрепить в другом месте.Моя демонстрация отражает это изменение.

Answer 2

Чтобы добиться того, что вам нужен метод jquery on().

Когда ваш документ загружен и в DOM присутствуют элементы, метод click() может их связать.Все работает просто отлично.Добавление элементов позже, поэтому после обработки click() они будут неизвестны этому событию.on() может помочь здесь.Идея состоит в том, чтобы связать родителя и доказать, что выбранный элемент соответствует условию.Неважно, если он создан недавно или нет.Смотрите это в действии ниже.

$('.low-filter').on('click', '.low-filter-tags a.low-filter-label', function() {
  $(this).clone().appendTo($('.low-filter-search'));
  $(this).remove();
});
$('.low-filter').on('click', '.low-filter-search a.low-filter-label', function() {
  $(this).clone().appendTo($('.low-filter-tags'));
  $(this).remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="low-filter">
  <div class="low-filter-tags">
    <a class="low-filter-label">
                Mobile
                <i class="fa fa-times"></i>
            </a>
    <a class="low-filter-label">
                Smartphone
                <i class="fa fa-times"></i>
            </a>
    <a class="low-filter-label">
                Laptop
                <i class="fa fa-times"></i>
            </a>

  </div>
  <div class="low-filter-search">

  </div>
</div>