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

我正在写一个脚本，允许用户在窗体上添加好友。我需要能够让他们添加一个朋友，点击输入旁边的添加按钮按钮，添加另一个朋友，点击该输入旁边的添加按钮，等等。我试图用jQuery来做到这一点，但我坚持。我实现了这一点，但我的脚本添加了像我想要的按钮，但它添加了原始按钮。我知道这是因为我在脚本中使用了“this”，但是如果没有这个，我就无法使用它。如果我的代码不是这样做的，我愿意接受其他建议。这里是我的代码，它被包裹在的document.ready脚本上涨：jQuery：如何添加按钮，可以依次添加更多按钮

$("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（...）”相同

来源

2011-11-21 sehummel

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

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

此外，您目前并不是唯一的ID，因此会发现您的问题。您最好使用类名称，因为ID应该是唯一的。

来源

2011-11-21 15:45:27 Pieter

现场已被替换为“开”。我试过了，动态添加的按钮不起作用。 – sehummel

@ shummel7845它没有被取代。 '活着'仍然存在，只是它可能会更好地使用''' – Neal

我的坏。我应该说过时了。 – sehummel

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

因此，它胜过了具有相同ID的其他DOM元素。让你的ID独一无二！

这是一个工程：http://jsfiddle.net/maniator/nsJ3E/

来源

2011-11-21 15:46:12 Neal

动态添加的按钮不起作用。 – sehummel

@ shummel7845多数民众赞成在你不使用'活“（或'开'）的点击。 – Neal

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

回答

相关问题