Выбор параметров элемента, не добавляемых в динамически добавленную строку

Question

Почему добавление значений выбора значений в foo function dos не запускается при нажатии кнопки добавления строки?

$(document).on("click", '.tdAdd', function() { 
     //alert($(this).closest('tr').index()); 
     var newRow = $("<tr>"); 
     var cols = ""; 
     cols += '<td><input type="button" value="Add Row" class="tdAdd"/></td>'; 
     cols += '<td><input type="button" value="Delete" class="tdAdd"/></td>'; 
     cols += '<td><input type="text" /></td>'; 
     cols += '<td><select class = "t">' + foo($(this).closest('tr').index() + 1) + '</select></td>'; 
     newRow.append(cols); 
     newRow.insertAfter($(this).closest("tr")); 
    }); 

см. Это FIDDLE для демонстрации.

function foo() { 
     var select = $('.t') 
      .append($("<option></option>") 
      .attr("value", 'one') 
      .text('One')); 
     select = $('.t') 
      .append($("<option></option>") 
      .attr("value", 'two') 
      .text('Two')); 

    } 

Answer 1

несколько проблем, первая из которых foo() не возвращает ничего, так что вы пытаетесь объединить undefined в вашей строке.

Дальше то, что вы делаете внутри foo(), не имеет смысла, так как $('.t') представляет собой коллекцию каждого элемента на странице с этим классом.

---

Ниже будет клонировать первый выбор, установите это значение в нуль, а затем вернуть HTML, чтобы добавить в вашу строку

function foo(index) { 
     var $select = $('.t:first').clone().val(''); 
     return $select.html(); // return the innerHtml of the select as string 
    } 

DEMO

---

Чтобы действительно упростить весь ваш addRow, вы можете клонировать целую строку, сбросить значения элементы управления формы и добавить этот клон ... все без необходимости каких-либо новых строк

$(document).on("click", '.tdAdd', function() { 
    var $currentRow = $(this).closest('tr'); 
    var $newRow = $currentRow.clone(); 
    $newRow.find(':input').val(''); 
    $currentRow.after($newRow); 
}) 

Answer 2

Проблема заключается в том, вы пытаетесь добавить опции к следующей строке текущего «тра», который всегда был следующим рядом доступный в DOM (тот, который был первоначально рядом с текущей строкой - оранжевая строка). Чтобы добавить параметры в строке, которую вы готовите в коде, вы должны сначала добавить его в DOM, а затем вставить тег параметров.

Минимальные изменения в код:

$(document).on("click", '.tdAdd', function() { 
     //alert($(this).closest('tr').index()); 
     var newRow = $("<tr>"); 
     var cols = ""; 
     cols += '<td><input type="button" value="Add Row" class="tdAdd"/></td>'; 
     cols += '<td><input type="button" value="Delete" class="tdAdd"/></td>'; 
     cols += '<td><input type="text" /></td>'; 
     cols += '<td><select class = "t"></select></td>'; 
     newRow.append(cols); 
     newRow.insertAfter($(this).closest("tr")); 
     foo($(this).closest('tr').index() + 1);//add options once the newly created 'select' is available in DOM 
    }); 

Answer 3

Вы были Добавляя объект JQuery. Я извлек HTML и добавил это. (see this answer):

function foo(index) { 
    var select = $("<option></option>") 
       .attr("value", 'one') 
       .text('One') 
       .prop('outerHTML'); 
    return select; 
} 

Я обновил обновленный скрипку

http://jsfiddle.net/8r0rdcLf/7/