Выбор только элемента с щелчком, который был добавлен в DOM

Question

Я делаю это веб-приложение, чтобы немного проверить JQuery. Он просто добавляет элементы в DOM. У меня возникли проблемы с событиями щелчка для вновь добавленных элементов. Я хочу иметь возможность изменять только те, на которые я нажал, вместо целой группы элементов.

Вот ссылка на демо-версию video.

Вот что у меня есть для моего кода:

var main = function() { 
    $('.btn').prop('disabled', true); 

    $('.post-btn').click(function() { 
     var text = $('.status-box').val(); 
     $('<li>').text(text).fadeIn(600).prependTo('.posts'); 
     $('.status-box').val(''); 
     $(this).prop('disabled', true); 
     $('.counter').text(140); 
    }); 

    $('.status-box').keyup(function() { 
     $('.counter').css('color', '#404040'); 
     var characters = $('.status-box').val().length; 
     var charactersleft = 140 - characters; 
     $('.counter').text(charactersleft); 

     if(charactersleft < 0) { 
      $('.post-btn').prop('disabled', true); 
      $('.counter').css('color', 'red'); 
     } 

     else if(charactersleft === 140) { 
      $('.post-btn').prop('disabled', true); 
     } 

     else { 
      $('.post-btn').prop('disabled', false); 
     } 
    }); 

    $('.delete-btn').click(function() { 
     $('.selected').fadeOut(300); 
     $(this).prop('disabled', true); 
    }); 

    /** 
    * Click event starts here 
    **/ 
    $('.posts').on('click', 'li', function(event) { 
     $('.posts li').css('background-color', 'lightgray').addClass('selected'); 
     $('.delete-btn').prop('disabled', false); 
    }); 
} 

$(document).ready(main); 

Я понимаю, что это $('.posts li') относится ко всем созданных элементов, я просто не знаю, как сделать это применить только к одному, что я» вы нажали.

Спасибо за любую помощь.

Answer 1

Использование $(this).

$('.posts').on('click', 'li', function(event) { 
    $(this).css('background-color', 'lightgray').addClass('selected'); 
    ... 

Answer 2

Просто замените эту строку:

$('.posts').on('click', 'li', function(event) { 
     $('.posts li').css('background-color', 'lightgray').addClass('selected'); 

с этим одним:

$('.posts').on('click', 'li', function(event) { 
$(this).css('background-color', 'lightgray').addClass('selected'); 

$ (это) вместо $ ('посты Ли.)