CODEWITHSUNDEEP
javascriptjqueryhtml
S. Wasta
S. Wasta

Reputation: 638

How to move a element move from one div to other and able to return to main div

My goal is move the element to another div and if then be able to return to his main div. This is my 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>

The first step works fine, but if I want to move the element from low-filter-search to low-filter-label it doesn't even detect the click event.

I'm trying to create a 'search/filter' with this buttons (a element) which will make show or hide some element if user selected it. Maybe you know any library and this can be done more easy. Thanks

Upvotes: 2

Views: 115

Answers (2)

tom
tom

Reputation: 10529

To achiev that you need the jquery on() method.

When your document is loaded and elements are present in the DOM the click() method can bind them. Everything works just fine. Appending elements later on so after click() was processed they will be unknown to that event. The on() can help here. The idea is to bind a parent and proof the clicked element is matching the condition. No matter if it is newly created or not. See this in action below.

$('.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>

Upvotes: 2

ADyson
ADyson

Reputation: 61849

I think you'll need "delegated events" to allow for handling clicks on items which didn't exist when the original event handler was declared - the event handler will normally only attach to elements which are actually present and match the selector when the handler is created. Clearly, your moved elements don't fulfil that criteria.

Using delegated events, this problem is removed because the event is attached to an element higher up the DOM, which you know will always exist. You then tell jQuery to only actually execute the callback if it turns out that the underlying target of the event matched the second selector (given in the function parameters). This gets evaluated at the time the event occurs, rather than when the event handler was first created.

Demo:

$(".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>

See https://api.jquery.com/on/ in the section titled "direct and delegated event handlers" for more info.

P.S. You don't really need to clone and then remove the element. Instead you can simply detach it, and re-attach it somewhere else. My demo reflects that change.

Upvotes: 3

Related Questions