Почему не работает jQuery код?

Question

[Сергей Безруков]

Здравствуйте, не могу понять, почему данный код работает некорректно(jQuery начал осваивать недавно). При нажатии на элемент с классом line у него должен переключаться класс show, но все дело в том, что этот класс переключается неоднократно(проверял с помощью alert) и в итоге show через один элемент остается отключенным. Так же мне не понятно почему (.line).click не работает вне конструкции (#add).click. Заранее спасибо за помощь.

$(function(){
    $("#add").on('click',function(){
        var val = $("#text").val();
        var elem = $("<div></div>");
        var text = $('<p class="line"></p>').text(val);
        $(elem).addClass("item");
        $("#container").append(elem);
        $(elem).append('<span class="rem">X</span>');
        $(elem).append(text);
        $(".rem").on('click', function(){
            $(this).parent().remove();
        })
        $(".line").click(function(){
            $(this).toggleClass("show");
        })
    })
})

Answer 1

[Anton Filippov]

$(".rem").on('click', function(){
  $(this).parent().remove();
 })
$(".line").click(function(){
  $(this).toggleClass("show");
})

это не работает корректно, потому что нужно на создаваемые элементы вешать ивенты через $(parent).on('click', '.child', fn)

Ну, то есть, в вашем случае напишите $(elem).on('click', '.rem', fn) и $(elem).on('click', '.line', fn), где fn - ваши колбеки с remove() и toggleClass()

Answer 2

[Максим Костюкевич]

ну самое главное почему не будет работать это то что в DOM дереве нет ваших .rem и .line в такой нотации можно предложить только повесить на document (глобальный) тогда даже при динамическом добавлении элементов у вас все будет работать. ну или второй вариант переписать вот так

var text = $('<p class="line"></p>').on('click', function(){
        $(this).toggleClass("show");
        }).text(val);

$(elem).append('<span class="rem">X</span>').on('click', function(){
  $(this).parent().remove();
 });

Нужно привязать данные к созданным элементам.