Question

目标是，当我专注于最后一个文本行时，另一个文本行出现在它下面。然后在一定数量的行中禁用它。我似乎无法弄清楚这里有什么问题：

$(document).ready(function() {
    lineCount = 0;
    $("form#qc").delegate("input:text:last-child", "focus", newTextLine);
});

function newTextLine() {
    newLine = ("<div id='ansInput{0}'>Answer {0}: <input type='text' name='ans1' /></div><!--ans1-->").format(lineCount);
    currentDiv = ("#ansInput{0}").format(lineCount);
    $(currentDiv).after(newLine);
    lineCount = lineCount++;
}

这是HTML页面：

<form id="qc" name="qc">
<h2>Create New Question!</h2>
<div id="ansInput0">Question: <input type="text" name="Question" /></div><!--question-->
<input type="submit" value="Submit" />
</form>

我得到一个非常非常令人满意的结果：每次出现两行，并且所有行都有0的索引，并且都响应事件处理程序，假设它只适用于最后一行... 任何想法代码有什么问题？

JSfiddle

欢迎任何有关如何使代码更智能的建议！

Answer 1

如上所述，您的代码中存在一些问题。我试试这样：克隆最后一个div，更改id并清除输入值：

$(function() {
    $("#qc>div:last-of-type>input").live('focus', function() {
        $(this).parent().after($(this).parent().clone().attr('id', 'ansInput' + $('#qc>div').length).find('input').val('').end());
    });
});

http://jsfiddle.net/7enNF/1/

input：text：last-child选择输入，这些输入是其父级中的最后一个子元素。所以它会选择所有输入，因为它们中的每一个都是ansInput div中唯一的（因此是最后一个）子节点
#qc＆gt; div：last-of-type＆gt;输入选择最后一个div中的输入。我使用了last-of-type，因为last-child与div不匹配，因为提交按钮是表单的最后一个子句
结束是必要的，因为我选择了div，然后我用“find（'input'）”选择输入以清除值。如果我这样离开它只会插入输入（不是div）。所以end（）再次从输入返回到div，以便插入div。

我希望这不会太混乱！：）

Answer 2

我在这看到几个问题。首先，根据您提供的代码，我没有看到您的lineCount变量的范围。其次，仅仅因为你正在为你正在创建的新元素添加一个事件处理程序，并不意味着你要从旧元素中删除它。

动态添加事件的正确方法是什么？

2 个答案: