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等），但我显然做错了什么。添加了输入，但查找最后一个输入的选择器只查找最后一个未附加的输入，而不是现有和附加输入的最后一个输入。

我搜索过，发现了这个帖子：

How to get reference to jQuery selector for content just added via manipulation method?

但我不太清楚这是如何解决我的问题的。

我想我的问题，简而言之，“每次点击锚点时如何选择新添加的输入？”

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;
});

jQuery选择器用于.append'd内容

2 个答案: