附加元素和 replaceWith() - jQuery答案

【问题标题】：Appending elements and replaceWith() - jQuery附加元素和 replaceWith() - jQuery
【发布时间】：2016-06-15 21:50:26
【问题描述】：

我试图让用户可以通过单击名为 #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>");

  });
});

【问题讨论】：

您能在jsfiddle.net 中设置一个问题示例吗？或者至少将您的 HTML 添加到问题中
这里是：jsfiddle.net/3h79cv7o
你必须知道$("#info-client")每次执行时都会发出一个DOM请求并创建一个jQuery对象。您可以通过缓存代码在很大程度上优化代码：var $infoClient = $("#info-client"); $infoClient.somestuff(); $infoClient.otherStuff(); 您还可以链接指令：$infoClient.append(c1).append(c2).append(c3)

标签： javascript jquery append replacewith

【解决方案1】：

看看发生了什么，一旦你第一次点击#info-client，它就会把所有的表单元素放在#info-client里面。因此，当您单击任何输入框时，包括#finish（所有这些都在#info-client 内），它会触发点击功能（我假设您拼错了on()）并隐藏并再次添加所有内容.

相反，您可以做的是将表单最初显示在屏幕上，但从视图中隐藏。单击某个触发按钮时，您无需将表单元素写入屏幕，而是显示表单。这样一来，您就不会在每次点击#info-client 时都重写表单，并且管理#finish 也会更容易。

看看有没有帮助。

【讨论】：