动态生成的表单与事件键，每个单独的操作

Question

好吧，我有一个表单，想要从父表单开始生成相同的新表单，并希望这些表单中的每一个都显示p中表单上的输入内容，但是当我这样做时传播到所有元素的事件是动态生成的。我只是希望它传播相应的表格。

我目前正在使用以下代码：

JS

jQuery(function(){
$(document).on('keyup','#il',function(){
$('p').append($(this).val());
})
$(document).on('click', '#btn',function(){
$("#in").append('<form>
<input id="il" type="text" size="20%">
<button id="btn" type="button">ADD</button>
<p></p><br />
</form>');
});
})

HTM

<div id="in">
<form>
<input id="il" type="text" size="20%">
<button id="btn" type="button">ADD</button>
<p></p><br />
</form>
</div>

JS Bin

Answer 1

这与事件的传播无关，您选择了所有p元素，更改：

$('p').append($(this).val());

要：

$(this).siblings('p').text(this.value);

http://jsbin.com/opehuh/7/edit

请注意，您正在生成无效标记，ID必须是唯一的。