web-dev-qa-db-fra.com

La fonction click () du bouton JQuery ne fonctionne pas

J'essaie de créer un formulaire dynamique où l'utilisateur peut ajouter des champs de texte dynamiques en fonction de leurs besoins. Voici mon code jQuery ..

$(document).ready(function() {
    $("#add").click(function() {
        var intId = $("#buildyourform div").length +1;
        var fieldWrapper = $("<div class=\"fieldwrapper\" name=\"field" + intId + "\" id=\"field" + intId + "\"/>");
        var fName = $("<input type=\"text\" name=\"name\" class=\"fieldname\" id=\"tb"+ intId +"_1\"/>");
        var lname = $("<input type=\"text\" name=\"email\" class=\"lastname\" id=\"tb"+ intId +"_2\"/>");
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");

        var addButton = $("<input type=\"button\" class=\"add\" id=\"add\" value=\"+\" />")
        removeButton.click(function() {
            $(this).parent().remove();
        });
        fieldWrapper.append(fName);
        fieldWrapper.append(lname);
        fieldWrapper.append(removeButton);
        fieldWrapper.append(addButton);
        $(this).remove();
        $("#buildyourform").append(fieldWrapper);

    });

});

et le code HTML est ...

<fieldset id="buildyourform">
    <legend>Build your own form!</legend>
    <div class="fieldwrapper" name="field1" id="field1" />
       <input type="text" name="name" class="fieldname" id="tb1_1" />
       <input type="text" name="email" class="lastname" id="tb1_2" />
       <input type="button" value="+" class="add" id="add" />
    </div>
</fieldset> 
<input type="submit" value="send" id="asdasd" name="submit" />

Vérifiez mon JSFiddle aussi.

Ce qui ne va pas chez moi, c’est que lorsque l’utilisateur clique sur le bouton "+" pour la première fois, puis que la fonction est active et que deux champs de texte sont ajoutés à mon ensemble de champs. Mais après cela, lorsque je clique sur le bouton "+", sa fonction de clic ne déclenche pas. Peut être id conflit. S'il vous plaît aider.

javascriptjqueryhtml
26
Free-Minded

Vous devez utiliser la syntaxe de délégation d'événements de .on() ici. Changement:

$("#add").click(function() {

à

$("#buildyourform").on('click', '#add', function () {

exemple de jsFiddle

50
j08691

Vous devez utiliser un gestionnaire d'événements délégué, comme le #add Les éléments ajoutés dynamiquement ne seront pas liés à l'événement click. Essaye ça:

$("#buildyourform").on('click', "#add", function() {
    // your code...
});

Vous pouvez également faciliter la lecture de vos chaînes HTML en mélangeant des guillemets linéaires:

var fieldWrapper = $('<div class="fieldwrapper" name="field' + intId + '" id="field' + intId + '"/>');

Ou même en fournissant les attributs sous forme d'objet:

var fieldWrapper = $('<div></div>', { 
    'class': 'fieldwrapper',
    'name': 'field' + intId,
    'id': 'field' + intId
});
16
Rory McCrossan

Après avoir rendu le id unique sur le document, vous devez utiliser délégation d’événements

$("#container").on("click", "buttonid", function () {
  alert("Hi");
});
3
Suresh Atta

L'événement click n'est pas lié à votre nouvel élément, utilisez un jQuery.on pour gérer le clic.

0
David MacCrimmon