Селектор jQuery для контента .append'd

Question

У меня есть следующая функция jQuery для добавления входных данных при щелчке привязки:

$("a#addrec").click(function () {
    var max = $("span#recommends input[id^='rec']:last").attr("id").substr(3, 1);                                   
    var next = max + 1;
    $("span#recommends").append('<input type="text" id="rec'+next+'" name="rec[]" placeholder="Joe\'s Nightclub" style="margin-left: 175px; margin-top: 10px;" /><div id="rec'+next+'err" class="err"></div><br style="clear: both;" />');
    return false;
});

, и я хотел бы идентифицировать их последовательно (т. Е. Rec1, rec2, rec3 и т. Д.), Но яЯ явно делаю что-то не так.Вход добавлен, но селектор для поиска последнего ввода находит только последний не добавленный вход, а не последний из набора существующих и добавленных входов.

Я искал и нашел эту тему:

Как получить ссылку на селектор jQuery для контента, только что добавленного с помощью метода манипуляции?

, но я не совсем понимаю, как это решает мою проблему.

Полагаю, мой вопрос вкратце звучит так: «Как выбрать новые добавленные входные данные при каждом нажатии на привязку?»

Answer 1

Вы должны parseInt (демо: http://jsfiddle.net/UtA5E/)

$("a#addrec").click(function() {
    var max = $("span#recommends input[id^='rec']:last").attr("id").substr(3, 1);
    var next = parseInt(max) + 1;
    $("span#recommends").append('<input type="text" id="rec' + next + '" name="rec[]" placeholder="Joe\'s Nightclub" style="margin-left: 175px; margin-top: 10px;" /><div id="rec' + next + 'err" class="err"></div><br style="clear: both;" />');
    return false;
});

До того, как он делал '1' + 1, что равно 11, затем 111 и т. Д. И т. Д.

Answer 2

Сохранение интерпретации JQuery элемента DOM в переменной var и работа с ним вместо прямого доступа к DOM каждый раз:

var $records = $("span#recommends");

$("a#addrec").click(function () {
    var max = $($records + " input[id^='rec']:last").attr("id").substr(3, 1);                                   
    var next = max + 1;
    $records.append('<input type="text" id="rec'+next+'" name="rec[]" placeholder="Joe\'s Nightclub" style="margin-left: 175px; margin-top: 10px;" /><div id="rec'+next+'err" class="err"></div><br style="clear: both;" />');
    return false;
});