.change() on checkbox not working properly

Question

I use dropdown-Button-Menu with different li-Elements and two ul-Elements.

Now I want to move li-Elements from the first to the second div and vice versa.

For a better understanding, here is a jsFiddle

If I uncheck 'Concept' for example, It works fine. The list element will be moved to the div with the id='scrollArea'. Also it works to click on 'Abstract' for example. The problem is: If I first check 'Concept' and then uncheck this Input, it do not work. I cannot move the li-Element back to the div with the id="scrollArea". What´s going wrong? Thank you for your help.

HTML

<div class="btn-group label-group" id="labelButton">
    <button type="button" id="label" class="btn btn-default dropdown-toggle" aria-expanded="true">  <i class="glyphicon glyphicon-tag"></i>
Manage Annotations <span class="caret"></span>

    </button>
    <ul class="dropdown-menu" id="label-menu" role="menu">
        <div id="fixedArea">
            <li class="labelCurrentAnnotations">Current Annotations:</li>
            <li class="lbl checkbox">
                <label class="aLabel c1">
                    <input type="checkbox" class="cbAnno" checked>Concept</label>
            </li>
            <li class="lbl checkbox">
                <label class="aLabel c3">
                    <input type="checkbox" class="cbAnno" checked>Sentence</label>
            </li>
        </div>
        <div id="searchArea">
            <li class="divider"></li>
            <li class="labelHeading">Add new Annotation:</li>
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search Annotation..."> <span class="input-group-btn">
    <button class="btn btn-default" type="button"><i class="glyphicon glyphicon-search"></i></button> </span></div>
            <!-- /search input -->
        </div>
        <div id="scrollArea">
            <li class="lbl checkbox">
                <label class="aLabel c2">
                    <input type="checkbox" class="cbAnno">Abbreviation</label>
            </li>
            <li class="lbl checkbox">
                <label class="aLabel c4">
                    <input type="checkbox" class="cbAnno">Abstract</label>
            </li>
            <li class="lbl checkbox">
                <label class="aLabel c5">
                    <input type="checkbox" class="cbAnno">Category</label>
            </li>
            <li class="lbl checkbox">
                <label class="aLabel c6">
                    <input type="checkbox" class="cbAnno">Chunk</label>
            </li>
            <li class="lbl checkbox">
                <label class="aLabel c7">
                    <input type="checkbox" class="cbAnno">ChunkNP</label>
            </li>
            <li class="lbl checkbox">
                <label class="aLabel c8">
                    <input type="checkbox" class="cbAnno">ChunkPP</label>
            </li>
            <li class="lbl checkbox">
                <label class="aLabel c9">
                    <input type="checkbox" class="cbAnno">ChunkVP</label>
            </li>
            <li class="lbl checkbox">
                <label class="aLabel c10">
                    <input type="checkbox" class="cbAnno">Entity</label>
            </li>
        </div>
    </ul>
</div>

JS

// Manage Labels

$('#fixedArea input:checkbox').change(
    function(){
        if ($(this).is(':checked')) {
            console.log('jetzt');
        } else {
            hf = "";
            hs = "";
            var hf = $('#fixedArea').outerHeight(true);
            var hs = $('#fixedArea').outerHeight(true);         
            $('#searchArea').css('margin-top', hf - 32 + 'px');
            $('#scrollArea').css('padding-top', hs + 70 + 'px');
            var text = $(this).parent().text();
            var color = $(this).parent().attr('class');
            $(this).closest('li').remove();
            $("#scrollArea").append('<li class="lbl checkbox"><label class="' + color + '"><input type="checkbox" class="cbAnno">'+ text + '</label></li>');
            console.log('jetzt');
        }
  });
 $('#scrollArea input:checkbox').change(
    function(){
        if ($(this).is(':checked')) {
            hf = "";
            hs = "";
            var hf = $('#fixedArea').outerHeight(true);
            var hs = $('#fixedArea').outerHeight(true);
            var text = $(this).parent().text();
            var color = $(this).parent().attr('class');
            $(this).closest('li').remove();
            $('#searchArea').css('margin-top', hf + 32 + 'px');
            $('#scrollArea').css('padding-top', hs + 130 + 'px');
            $("#fixedArea").append('<li class="lbl checkbox"><label class="' + color + '"><input type="checkbox" class="cbAnno">'+ text + '</label></li>');
        } 
  }); 

Answer 1

The events that you bound to the elements won't automatically be added to elements that you put in there afterwards. The elements that you move into a div won't have the same events as the elements that were there originally.

You can use delegated events to get that functionality. That works by binding an event on a surrounding element, and specify which elements inside it should have the event active:

$('#label-menu').on('change', '#fixedArea input:checkbox',
  function() {
    ...

$('#label-menu').on('change', '#scrollArea input:checkbox',
  function() {
    ...

You can also rewrite the code so that you bind the same event to all checkboxes, and it simply move the element to the right place debending on the state of the checkbox. Move the elements instead of recreate them, so that they retain the event binding:

$('#label-menu input:checkbox').change(
  function(){
    var hf = $('#fixedArea').outerHeight(true);
    var hs = $('#fixedArea').outerHeight(true);
    if ($(this).is(':checked')) {
      $('#searchArea').css('margin-top', hf + 32 + 'px');
      $('#scrollArea').css('padding-top', hs + 130 + 'px');
      $("#fixedArea").append($(this).closest('li'));
    } else {
      $('#searchArea').css('margin-top', hf - 32 + 'px');
      $('#scrollArea').css('padding-top', hs + 70 + 'px');
      $("#scrollArea").append($(this).closest('li'));
    }
  }
);