Добавление элементов и replaceWith() - jQuery

Question

Я пытаюсь дать пользователю возможность обновить значения некоторых полей, относящихся к нему, щелкнув контейнер с именем #info-client. Здесь я добавляю области ввода после щелчка и после нажатия кнопки #finish информация затем быть обновленным. Проблема, которую я получил, состоит в том, что информация была обновлена, но они были показаны более одного раза ( 2 раза или даже 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>");

  });
});

Answer 1

Посмотрите, что происходит, когда вы нажали #info-client в первый раз он помещает все элементы формы ВНУТРИ #info-client, Поэтому, когда вы нажимаете на любое из полей ввода, в том числе #finish (все из которых находятся внутри #info-client), он запускает функцию нажатия (я предполагаю, что вы написали с ошибкой on()) и прячет и снова все добавляет.

Вместо этого вы можете сначала иметь форму на экране, но скрыть ее от глаз. При нажатии определенной кнопки запуска вместо записи элементов формы на экран, вы просто показываете форму. Таким образом, вы не переписываете форму каждый раз #info-client ударил, и это также будет легче управлять #finish,

Посмотрите, поможет ли это.