Anfügen Elemente und replaceWith() - jQuery

Ich versuche, dem Benutzer die Möglichkeit zu geben, die Werte einiger Felder zu aktualisieren über ihn auf einem Behälter durch Klicken namens # info-Client Hier anhängen ich die Eingabebereiche nach Der Klick und sobald der Knopf #finish angeklickt ist, werden die Informationen aktualisiert. Das Problem, das ich habe ist, dass die Infos aktualisiert wurden noch waren sie mehr als einmal gezeigt (2-mal oder sogar 3 ..)Anfügen Elemente und replaceWith() - jQuery

$("#info-client").one('click', function() { 
    $("#info-client").children().hide(); 

    // liste des champs 
    var c1 = $('<label> Nom : </label><input type="text id="identifiant"> <br>'); 
    var c2 = $('<label> Adresse : </label><input type="text" id="adresse"><br>'); 
    var c3 = $('<label> Ville : </label><input type="text" id="ville"><br>'); 
    var c4 = $('<label> Tel : </label><input type="text" id="tel"> <br>'); 
    var c5 = $('<label> Fax : </label><input type="text" id="fax"> <br>') 
    var button = $('<input type="button" id="finish" value="Mettre à jour">'); 

    $("#info-client").append(c1); 
    $("#info-client").append(c2); 
    $("#info-client").append(c3); 
    $("#info-client").append(c4); 
    $("#info-client").append(c5); 
    $("#info-client").append(button); 

    $("#finish").one('click', function() { 
    var identifiant = $('#identifiant').val(); 
    var adresse = $('#adresse').val(); 
    var ville = $('#ville').val(); 
    var tel = $('#tel').val(); 
    var fax = $('#fax').val(); 

    c1.replaceWith("<h4>" + identifiant + "</h4>"); 
    c2.replaceWith("<p> Adresse : " + adresse + "</p>"); 
    c3.replaceWith("<p>" + ville + "</p>"); 
    c4.replaceWith("<p>Fax : " + tel + "</p>"); 
    c5.replaceWith("<p> Tel :" + fax + "</p>"); 

    }); 
});

Quelle

2016-06-15 Mohamed Oubella

Könnten Sie ein Beispiel für das Problem in einem http://jsfiddle.net einrichten? Oder zumindest fügen Sie Ihren HTML zur Frage hinzu –

Hier ist es: https://jsfiddle.net/3h79cv7o/ –

Sie müssen wissen, dass '$ (" # info-client ")' eine DOM-Anfrage macht und eine jQuery erstellt Objekt jedes Mal, wenn es ausgeführt wird. Sie können Ihren Code weitgehend optimieren, indem Sie ihn zwischenspeichern: 'var $ infoClient = $ (" # info-client "); $ infoClient.somestuff(); $ infoClient.otherStuff(); 'Sie können auch Anweisungen verketten:' $ infoClient.append (c1) .append (c2) .append (c3) ' –

sehen, was passiert ist, wenn Sie #info-client zum ersten Mal geklickt haben, es legt alle Formularelemente INSIDE #info-client. Wenn Sie also auf eines der Eingabefelder klicken, einschließlich #finish (alle innerhalb von #info-client), löst es die On-Click-Funktion aus (ich nehme an, dass Sie falsch geschrieben on()) und verbirgt und fügt alles wieder hinzu.

Was Sie tun könnten, stattdessen ist das Formular zunächst auf dem Bildschirm, aber ausgeblendet aus Sicht. Wenn Sie auf einen bestimmten Auslöser klicken, anstatt die Formularelemente auf den Bildschirm zu schreiben, zeigen Sie einfach das Formular an. Auf diese Weise überschreiben Sie das Formular nicht jedes Mal, wenn #info-client erreicht wird, und es ist auch einfacher, #finish zu verwalten.

Sehen Sie, wenn das hilft.

Quelle

2016-06-15 13:24:41

Anfügen Elemente und replaceWith() - jQuery

Antwort

Verwandte Themen