Кнопка удаления не отображается в динамически добавленной строке

Question

Я использую jQuery для динамического добавления строк в мою таблицу HTML при нажатии кнопки. Для вновь добавленной строки я хочу иметь кнопку «+» и «X» для добавления/удаления динамически добавленных строк.

Мой HTML для того же выглядит следующим образом:

<td> 
<button type="button" class="addRow"> + 
</button> 
</td> 

И мой JQuery код такой же заключается в следующем:

$("#table-id").each(function(){ 
    $("button.addRow", this).live('click', function() { 

    var html = '<tr><td> </td> <td> </td> <td> </td> <td> <input type="textbox" name="dateLastContact" class="datesToBeAdded"> </td> ' + 
    '<td> <input type="text" name="newContact"> </td> <td> <input type="text" name="newContactPhone"> </td> ' + 
    '<td> <input type="text" name="newContactEmail"> </td> <td> <button class="addRow">+</button> &nbsp; <button class="deleteRow">X</button> </td> </tr>'; 

    var row = $(this).closest('tr'); // get the parent row of the clicked button 


    var newRow = $(html).insertAfter(row); // insert content 
    /* add datepicker and jQuery UI Button styling to newly added row */ 
    newRow.find('td').css('text-align','center'); 
    newRow.find('.datesToBeAdded').datepicker(); 
    newRow.find('.addRow').button(); 
    newRow.find('.deleteRow').remove(); 
    }); 
}); 

Но, при добавлении новой строки, я просто не вижу кнопка «X» добавлена ​​рядом со строкой «+».
Любые идеи, что я делаю неправильно.

Thanks,
Pritish.

Answer 1

Несколько вещей, ваш .live() обработчик может быть действительно .delegate(), как это:

$("#table-id").delegate("button.addRow", "click", function() { 

Тогда где вы делаете это:

newRow.find('.deleteRow').remove(); 

I думаю вы имели в виду:

newRow.find('.deleteRow').button(); 

Вы могли бы объединить и то, что в одном заявлении для обеих кнопок:

newRow.find('.addRowm, .deleteRow').button(); 

Или, если вы имели в виду, чтобы удалить строку при нажатии, сделайте следующее:

newRow.find('.deleteRow').button().click(function() { 
    $(this).closest('tr').remove(); 
}); 

Answer 2

Вы удаляете кнопку на линии:

newRow.find('.deleteRow').remove();