Jquery单击事件未在附加元素上触发

Question

这让我疯了。我在页面加载后向表中添加行。有一个按钮可以删除行，一个按钮可以将其保存到数据库中。添加新行后，我可以使用click事件将其删除。但是，当添加一行并尝试遍历它以访问以前的输入时，我什么都没得到。不确定我做错了什么。

理想情况下，当我点击保存按钮时，它会显示上一个的值：<input class="box2" type="text" value="test">，所以我希望看到“测试”

HTML

<input id="addChatQuestion" type="button" value="Add Row"> 

<table>
<tbody id="mainBody" class="questionBody"> 
<tr>
    <td> <input class="box1" type="text" value="4"> <input class="box2" type="text" value="Not Void"> <input class="qSave" type="button" value="Save"></td>
</tr>
</tbody>
</table>

的jQuery

$('#addChatQuestion').click(function() {
var newRow ='<tr><td><input class="box1" type="text" value="" /> <input class="box2"  type="text" value="test"> <input class="qSave" type="button" value="Save"><input class="qDelete" type="button" value="Delete"></td></tr>';
$('#mainBody').append(newRow);
});

$('.questionBody').on('click', '.qSave', function() {
var score = $(this).prev().val();
alert(score);
});

$('.questionBody').on('click', '.qDelete', function() {
$(this).closest('tr').remove();
});

这是一个JSFiddle：http://jsfiddle.net/s2Sy2/

Answer 1

您是否尝试点击下面列出的保存按钮，并让它提醒上面的那个按钮？

如果您希望在test中看到alert，系统正在按预期工作。

我有：

• 创建了10个元素
• 删除了其中5个
• 又增加了3个
• 每次都测试每个值和相应的test alerts。