jQuery append добавляет несколько элементов

Question

У меня есть этот javascript, который используется для добавления элементов в один из пяти столбцов. И проблема в том, что когда я нажимаю кнопку «Добавить», она добавляет один новый элемент в текущий столбец (цель), , а также каждый элемент уже есть.

Сначала код.

//adds the html code underneath the column. Get's called on document ready. 
function populateTable(){ 
    for (var i = 0; i < 5; i++) 
     $("#maintable .control .c"+i) 
      .append('<a href="#" class="add" onclick="addItem('+i+')">Add</a>'); 
} 
//... 
//and the function called onclick 
function addItem(c,r,doRet,target){ 
    if(target == undefined) 
     target = $("#maintable .schedtab .c"+c).get(); 
    if(r == undefined){ 
     r = $(target).find(".item").length + 1; 
    } 
    var $item = $('<div class="item cell' + cellAddress(c,r) + '"></div>'); 
    $item.append('<input type="text" class="packers"></input>'); 
    $item.append('<input type="text" class="cartons" ></input>'); 
    $item.append('<input type="text" class="count"></input>'); 
    $item.focusin(showCartonsSelect); 
    $item.mouseenter(showCP); 
    $item.mouseleave(hideCP); 
    if(doRet) return $item; 
    var $targ = $(target); 
    $targ.append($item); 
} 

А вот HTML:

<table class="schedule"> 
    <tr class="schedtab"> 
     <td class="col c1"></td> 
     <td class="col c2"></td> 
     <td class="col c3"></td> 
     <td class="col c4"></td> 
     <td class="col c5"></td> 
    </tr> 
    <tr class="control"> 
     <td class="c1"></td> 
     <td class="c2"></td> 
     <td class="c3"></td> 
     <td class="c4"></td> 
     <td class="c5"></td> 
    </tr> 
</table> 

Edit: Ok, вот обновление. Когда я нажимаю кнопку «Добавить», которая запускает addItem (1), она генерирует новый «элемент», а затем добавляет его к цели и каждому элементу, который уже существует. Каждый элемент является div с классом «.item». Он должен только добавить новый объект к цели, а не к каждому элементу, который уже существует.

Answer 1

Если я правильно понимаю, возможно, если вы измените $targ.append($item) на $targ.html($item), то исправите вашу проблему.

Как вы сказали: «Он добавляет один новый элемент в текущий столбец (цель), а также каждый элемент уже там».

Это потому, что append() добавляет контент, оставляя существующее содержимое элемента. .html() Вставляет и заменяет любой предыдущий контент.

Answer 2

Моя ошибка :) Проблема в том, что адрес ячейки возвращает A1 c1 r1 значение Cell A1, Column 1, Row 1. Поэтому он добавляет новый элемент в каждый div, который имеет класс c1, что означает добавление его к каждому существующему элементу в столбце, а также к самому столбцу. В любом случае, спасибо за вашу помощь. Причина, по которой он не делал этого в скрипке, состоял в том, что я не включил функцию адреса ячейки.

Так вот обновленная скрипку, которая показывает проблему: http://jsfiddle.net/Arlen22/uzPDU/2/

И обновленный код является: target = $("#maintable .schedtab .col.c"+c).get();