Appending elements and replaceWith() - jQuery

Question

i'm trying to give the user the possibility to update the values of some fields concerning him by clicking on a container named #info-client Here I append the input areas after the click and once the #finish button is clicked the infos will then be updated. The problem i got is that the infos were updated yet they were showed more than once ( 2 times or even 3 .. )

$("#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>");

  });
});

Could you setup an example of the problem in a http://jsfiddle.net? Or at least add your HTML to the question — Rory McCrossan, Jun 15 '16 at 13:16
You have to know that `$("#info-client")` makes a DOM request and creates a jQuery object every time it's executed. You could largely optimise your code by caching it : `var $infoClient = $("#info-client"); $infoClient.somestuff(); $infoClient.otherStuff();` You can also chain instructions : `$infoClient.append(c1).append(c2).append(c3)` — Jeremy Thille, Jun 15 '16 at 13:29

score 0 · Answer 1 · answered Jun 15 '16 at 13:24

See what's happening is once you've clicked #info-client for the first time, it puts all of the form elements INSIDE #info-client. So when you click on any of the input boxes, including #finish (all of which are inside #info-client), it triggers the on-click function (I'm assuming you misspelled on()) and hides and adds everything again.

What you could do, instead, is have the form initially on the screen but hidden from view. When a certain trigger button is clicked, rather than writing the form elements to screen, you simply show the form. This way, you're not rewriting the form every time #info-client is hit, and it'll also be easier to manage #finish.

See if that helps.

Appending elements and replaceWith() - jQuery

1 Answers1