。
我正在尝试创建一个在表格中具有"添加新产品"部分的订单。基本上，用户应该能够单击"添加行"链接，并且将出现一个新的输入行，允许用户将另一个产品添加到订单列表中。我可以进行一次这项工作，但之后表单不会添加任何新行。在控制台中.log我可以看到事件处理程序只处理原始表单元素，而不是新产品输入行。我在这里工作的内容有一个缩短的小提琴：
http://jsfiddle.net/scottm1164/eTBr6/5/
这是我的jQuery：
<script>
$(document).ready(function () {
(function () {
var start = $('table'),
newRow = $('<tr><td><input type="text" class="quantity" /></td><td><input type="text" class="prodNum" /></td><td><textarea cols="15" rows="1"></textarea></td><td><p class="addRow">Add a Row</p></td></tr>');
$('.addRow').on('click', function () {
$(start).append(newRow);
console.log(this);
});
})(); //end SIAF
}); //END document ready
</script>
这是我的表格：
<form enctype="multipart/form-data" method="post" action="#" id="orderForm">
<ul>
<li>Name:
<br>
<input type="text" id="name" />
</li>
<li>Email:
<br>
<input type="email" id="email" />
</li>
<li>Company:
<br>
<input type="text" id="company" />
</li>
<li>Phone:
<br>
<input type="tel" id="phone" />
</li>
<li>Delivery Address:
<br>
<input type="text" id="delAddress" />
</li>
<li>PO Number:
<br>
<input type="text" id="poNum" />
</li>
<li>If you have a document for your order, attach it here:
<br>
<input type="file" id="docs" />
</li>
<li>
<table id="prodTable" width="auto" border="0" cellpadding="4" cellspacing="4">
<tbody>
<tr>
<td>Quantity</td>
<td>Product Number</td>
<td>Product Description</td>
<td> </td>
</tr>
<tr>
<td>
<input type="text" class="quantity" name="quantity_" />
</td>
<td>
<input type="text" class="prodNum" name="prodNum_" />
</td>
<td>
<textarea cols="15" rows="1" name="prodDesc_"></textarea>
</td>
<td>
<p class="addRow">Add a Row</p>
</td>
</tr>
</tbody>
</table>
</li>
<li>Special Delivery Instructions:
<br>
<textarea cols="30" rows="10" id="instructions"></textarea>
</li>
</ul>
<input type="submit" id="submit" />
</form>
有人可以向我解释这段代码出了什么问题吗，我对 jQuery/Javascript 相当陌生，所以我只是不明白为什么代码只工作一次，但在随后单击"添加行"链接后不能工作，并且仅在原始的"添加行"链接上而不是在新创建的链接上
试试这个
http://jsfiddle.net/eTBr6/8/
$('form').on('click', '.addRow', function () {
var start = $('table'),
newRow = $('<tr><td><input type="text" class="quantity" /></td>' +
'<td><input type="text" class="prodNum" /></td>' +
'<td><textarea cols="15" rows="1"></textarea></td>' +
'<td><p class="addRow">Add a Row</p></td></tr>');
$(start).append(newRow);
});
变量放在单击处理程序中，并通过将表单作为上下文来使用事件委派
工作演示
我想这就是你需要的。对于动态加载的元素，委托$(document).on()比普通函数（）更需要，因为正常事件仅在页面加载时工作。
这是代码
$(document).ready(function () {
var start = $('table'),
newRow = '<tr><td><input type="text" class="quantity" /></td><td><input type="text" class="prodNum" /></td><td><textarea cols="15" rows="1"></textarea></td><td><p class="addRow">Add a Row</p></td></tr>';
$(document).on('click', '.addRow', function () {
$(start).append(newRow);
});
}); //end document.ready
希望这有帮助，谢谢
我做了一些类似于乔纳森的事情，只是没有那么快。
在这里小提琴：http://jsfiddle.net/xCNqP/1/
(function () {
var start = $('table'),
newRow = '<tr><td><input type="text" class="quantity" /></td><td><input type="text" class="prodNum" /></td><td><input type="text" maxlength="15"/></td><td><p class="addRow">Add a Row</p></td></tr>';
$(document).on('click', '.addRow', function () {
$(start).append($(newRow));
});
})(); //end SIAF
我使用的主要更改newRow设置为仅一个字符串，因为声明元素将允许您仅附加一次。 需要重新声明（Jonathan通过在处理程序中移动声明来执行此操作）才能重新追加。
还包括正确使用on以便将其附加到新元素。
http://jsfiddle.net/LK5sj/将新行粘贴到函数中并使函数递归，并且不要忘记清除并重新分配事件处理程序，否则您将获得比您想要的更多的新行
var start = $('table');
function addRow(){
newRow = $('<tr><td><input type="text" class="quantity" /></td><td><input type="text" class="prodNum" /></td><td><textarea cols="15" rows="1"></textarea></td><td><p class="addRow">Add a Row</p></td></tr>');
$(start).append(newRow);
$('.addRow').off('click');
$('.addRow').on('click', function() {
addRow();
});
}
$('.addRow').on('click', function() {
addRow();
});