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也会更容易。

看看是否有帮助。

追加元素和replaceWith（） - jQuery

1 个答案: