Question

我正在编写一个脚本，允许用户在表单上添加好友。我需要能够让他们添加朋友，单击输入旁边的添加按钮按钮，添加另一个朋友，单击该输入旁边的添加按钮，依此类推。我试图用jQuery做到这一点，但我被卡住了。我实现了这一点，但我的脚本添加了我想要的按钮，但它添加了原始按钮。我知道这是因为我在我的剧本中使用“this”，但如果没有这个，我就无法使用它。如果我的代码不是这样做的方式，我愿意接受其他建议。这是我的代码，它包含在document.ready更高的脚本中：

$("button#add-friend").click(function (e) {
      $(this).trigger('addFriend');
});
$('#add-friend').on('addFriend', function() {
      $(this).append('<input type="text" value="Friend"><span id="add"><input type="button" id="add-friend" value="+"></span><br/>');
});

HTML是：

<input type="text" value="Friend"><span id="add"><input type="button" id="add-friend" value="+"></span>
<div id="add-friend"></div>

顺便说一句，我使用的是jQuery 1.7，它具有新的“on”语法。 “.on（'click'，...）”与“.click（...）”

相同

Answer 1

您可以使用jQuery's live并附加基于CSS类的事件处理程序。这将允许您创建一个通用的事件处理程序，即使对于动态创建的按钮也会被触发。

您应该使用jQuery's parent导航DOM树并将生成的HTML插入所需的位置。

此外，您的ID目前并不是唯一的，因此您会发现这会造成一些麻烦。你可能最好使用类名，因为ID应该是唯一的。

Answer 2

这是因为<div id="add-friend"></div> 不是一个按钮！

所以它胜过你拥有相同id的其他DOM元素。让你的ID独一无二！

以下是有效的：http://jsfiddle.net/maniator/nsJ3E/

jQuery：如何添加可以依次添加更多按钮的按钮

2 个答案: