1
    <div class="box">
        <h1>Left List</h1>
        <ul id="left-list">
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
        </ul>
    </div>
    <div class="box">
        <h1>Right List</h1>
        <ul id="right-list">
            <li>TEST</li>
            <li></li>
            <li></li>
        </ul>
    </div>


$('#left-list li').on('click', function () {
    $(this)
        .appendTo($('#right-list'))
        .unbind('click');
})

$('#right-list li').on('click', function () {
    $(this)
        .appendTo($('#left-list'))
        .unbind('click');
})

It just stays on one side after moving once x: what can i do? to fix this? i want to move from left to right, and those which got moved to the right side, back to the left side

Mosoli
  • 23
  • 4
  • Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – showdev Aug 01 '21 at 19:48

2 Answers2

0

The click event handler only works on the li elements that were originally in #right-list, not newly appended elements. You can either add an event listener on the newly appended element, or use event delegation.

Event delegation example:

$(document.body).on('click', '#left-list li', function() {
  $(this)
    .appendTo($('#right-list'))
    .unbind('click');
})
$(document.body).on('click', '#right-list li', function() {
  $(this)
    .appendTo($('#left-list'))
    .unbind('click');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
  <h1>Left List</h1>
  <ul id="left-list">
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
  </ul>
</div>
<div class="box">
  <h1>Right List</h1>
  <ul id="right-list">
    <li>TEST</li>
    <li></li>
    <li></li>
  </ul>
</div>
Spectric
  • 30,714
  • 6
  • 20
  • 43
  • omg it worked, can u explain it so i can understand it? would be great if possible – Mosoli Aug 01 '21 at 19:17
  • @Mosoli Is there any reason you accepted Andy's answer and not mine? His answer is nearly exactly the same as mine. – Spectric Aug 02 '21 at 00:58
0

You need to use event delegation to catch the dynamic DOM updates. You can added the listener to the document instead:

$(document).on('click', '#left-list li', function()..

$(document).on('click', '#right-list li', function()...

Or, even better, wrap your box elements in a parent element, and target that instead:

$('.boxes').on('click', '#left-list li', function() {
  $(this).appendTo($('#right-list'));
})

$('.boxes').on('click', '#right-list li', function() {
  $(this).appendTo($('#left-list'));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boxes">
  <div class="box">
    <h1>Left List</h1>
    <ul id="left-list">
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
    </ul>
  </div>
  <div class="box">
    <h1>Right List</h1>
    <ul id="right-list">
      <li>TEST</li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>
Andy
  • 61,948
  • 13
  • 68
  • 95
  • 1
    what is the difference between (document) and (document.body), i tried both, both works – Mosoli Aug 01 '21 at 19:22
  • `body` is an element _within_ `document`. Spectric has simply placed the listener on the body instead of the document. Both are valid answers. `document` is convenient, but adding the listener on the closest parent element is a good idea too. – Andy Aug 01 '21 at 19:24
  • Event delegation works because events from children bubble up the DOM. You can place one listener on a parent element to "catch" them instead of attaching listeners to all the children. – Andy Aug 01 '21 at 19:26
  • 1
    aaah oke i kinda understand now, uhm so i should use (document.body) because its better right? – Mosoli Aug 01 '21 at 19:27
  • It's entirely up to you. – Andy Aug 01 '21 at 19:28
  • is there any benefit? of (document.body) – Mosoli Aug 01 '21 at 19:29