Ajouter dynamiquement zone de texte à l'aide de jquery

Quel est le problème avec ce code ? Seule la première d'ajouter et de supprimer le lien fonctionne...

<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css">
div{
padding:8px;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$(".addButton").click(function () {
if(counter>5){
alert("Only 5 textboxes allow");
return false;
}   
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.html('<TABLE><TR><TD>' +
'<input type="text" name="textbox' + counter + 
'" id="textbox' + counter + '" value="" ></TD><TD><input type="text" name="textbox' + counter + 
'" id="textbox' + counter + '" value="" ></TD>&nbsp;<TD><a href="#" value="addButton" class="addButton">Add</a>&nbsp;<a href="#" value="removeButton" class="removeButton">Remove</a></TD></TR></TABLE>');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$(".removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}   
counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
</script>
</head><body>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<TR><TD><input type='textbox' id='textbox1' ></TD>&nbsp;<TD><input type="text" name="textbox' + counter + 
'" id="textbox' + counter + '" value="" ></TD>&nbsp;<TD><a href="#" value="addButton" class="addButton">Add</a>&nbsp;<a href="#" value="removeButton" class="removeButton">Remove</a></TD></TR>
</div>
</div>
</body>
</html>

OriginalL'auteur Hector Barbossa | 2010-11-17

  1. 9

    Lorsque vous liez la cliquez sur() gestionnaire, il n'y a qu'un Add lien sur la page à lier. Utilisation live() pour capturer les événements de clic pour des éléments qui ne sont pas sur la page encore:

    $(".addButton").live("click", function () {

    Travail de démonstration: http://jsfiddle.net/u9hvp/

    Merci s'accoupler, il fait le tour
    Merci pour le code jquery, il m'aide.

    OriginalL'auteur Andy E

  2. 1

    Utilisation de live() est dépréciée, et retiré depuis Andy E post. La même fonctionnalité est désormais pris en charge à l'aide de la syntaxe suivante:

    $(document).on("click", ".removeButton", function () {

    OriginalL'auteur jlunavtgrad

  3. 0

    vous venez d'ajouter ce fichier dans votre dossier sa fonctionne très bien...!

    jquery-1.3.2.min.js

    OriginalL'auteur Selvakumar Kaliyappan