追加は要素とreplaceWith（） - jQueryの

Question

私はユーザーがここ＃情報-クライアント という名前のコンテナをクリックすることで、彼に関するいくつかのフィールドの値を更新する可能性を与えるためにしようとしているが、私は後に、入力エリアを追加しますクリックして#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も管理しやすくなります。

これが役立つかどうかを確認してください。