CODEWITHSUNDEEP
jquery
Matt
Matt

Reputation: 2509

Why is my list not appending with list items in Jquery?

In jQuery, I have a somewhat simple script with pre-made css classes, but no css formatting here.

http://jsfiddle.net/nSscK/

I was hoping to simply add more fields to the list. I stored the list item inside taskItem and logged it to make sure the html is correct. However, nothing appears on my list.

Thank you.

Upvotes: 2

Views: 82

Answers (3)

thecodeparadox
thecodeparadox

Reputation: 87073

jQuery(function (){

    $('#add').click(function(){
        var taskItem = $("#tasks ul li:eq(0)").clone(true, true); // need to clone for new add
        $('#tasks ul').append(taskItem);
        taskItem.find(':input:text').val("");
        return false;
    });
});

DEMO

Upvotes: 0

xdazz
xdazz

Reputation: 160833

You need to do clone it.

var taskItem = $("#tasks ul li").clone();

Upvotes: 0

VisioN
VisioN

Reputation: 145368

You forgot to clone the element before appending. Otherwise you just append the same element.

$('#add').click(function(){
    var taskItem = $("#tasks ul li:first").clone();
    $('#tasks ul').append(taskItem);
    taskItem.find(':text').val("").focus();
    return false;
});

DEMO: http://jsfiddle.net/nSscK/3/

Upvotes: 2

Related Questions