jQuery: Перемещение элементов Li?

Question

Я использую скрипт jQuery, который щелкнул на листе слева в левом div, переместив его в правый div.

$(document).ready(function(){ 

    $('.left ul li').click(function(){ 
     var toAdd = $(this).html(); 
     $('.right ul').append('<li>' + toAdd + '</li>'); 
    }); 

    $(document).on('click', '.left ul li', function(){ 
     $(this).remove(); 
    }); 

}); 

Он отлично работает. Однако, если я попытаюсь сделать то же самое для элементов Li в левом div, чтобы после их просмотра они переместились в левый div, это не работает.

$(document).ready(function(){ 

    $('.left ul li').click(function(){ 
     var toAdd = $(this).html(); 
     $('.right ul').append('<li>' + toAdd + '</li>'); 
    }); 

    $(document).on('click', '.left ul li', function(){ 
     $(this).remove(); 
    }); 

    $('.right ul li').click(function(){ 
     var toAdd = $(this).html(); 
     $('.left ul').append('<li>' + toAdd + '</li>'); 
    }); 

    $(document).on('click', '.right ul li', function(){ 
     $(this).remove(); 
    }); 

}); 

Что я делаю неправильно?

Это codepen ссылка:

http://codepen.io/itsthomas/pen/hIfLD

Спасибо за вашу помощь.

Answer 1

Вы не можете привязать событие к элементу, который не существует.

$(document).ready(function(){ 
    $(document).on('click', '.left ul li', function(){ 
     $(this).remove(); 
     var toAdd = $(this).html(); 
     $('.right ul').append('<li>' + toAdd + '</li>'); 
    }); 

    $(document).on('click', '.right ul li', function(){ 
     $(this).remove(); 
     var toAdd = $(this).html(); 
     $('.left ul').append('<li>' + toAdd + '</li>'); 
    }); 
});