CODEWITHSUNDEEP
javascriptjquery
janicehoplin
janicehoplin

Reputation: 397

jQuery clone misunderstanding

I'm not understanding this cloning process... this is what's happening, there are four pictures, three clicks, first photo is the initial state.

In the third picture there are two boxes, that's fine, but rather than each box having one project name input and add task button, there are two in the first box, and normal in the second box. Click the button again and it becomes 3:2:1, next click it would be 4:3:2:1, etc... I don't want that. I just want boxes to be added with one piece per box.

code

function addProject() {
      $(project).clone().appendTo(".projectPanel");
      $(projectNameInput).clone().appendTo(".project");
      $(addTaskButton).clone().appendTo(".project");
    }

enter image description here

enter image description here

enter image description here

enter image description here

Upvotes: 0

Views: 26

Answers (1)

Binvention
Binvention

Reputation: 1077

Your problem is your appendTo it appends the element to all elements in the set of matched elements so everything with the class "project". for more information on it try looking at the jquery appendTo documentation. to fix it try something like this

function addProject() {
      var newProject=$(project).clone();
      newProject.appendTo(".projectPanel");
      $(projectNameInput).clone().appendTo(newProject);
      $(addTaskButton).clone().appendTo(newProject);
 }

using the return value of $(project).clone() allows you to grab only the new project rather than all of the projects that currently exist

Upvotes: 1

Related Questions