요소를 추가하고 replaceWith() - jQuery

Question

컨테이너를 클릭하여 그에게 관한 몇 가지 필드의 값을 업데이트 할 수있는 가능성을 사용자에게 제공하려고합니다. # info-client 여기에 입력 영역을 추가합니다. 클릭 한 번 #finish 버튼을 클릭하면 정보가 업데이트됩니다. 내가 가진 문제는 그것을

$("#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을 클릭 한 후 무엇 일어나는 것은 참조 (.. 2 회 또는 3)에 정보를 정기적으로 업데이트하고 아직 그들이 한 번 이상을 보였다이다 모든 양식 요소를 내부에 넣습니다. #info-client. 따라서 #finish (모두 #info-client 안에 있음)을 포함하여 입력 상자를 클릭하면 클릭 연결 기능 (사용자가 철자가 잘못 입력되었다고 가정하고 on())을 숨기고 다시 추가합니다.

대신 할 수있는 것은 처음에는 화면에 양식이 있지만보기에는 숨겨져 있습니다. 특정 트리거 버튼을 클릭하면 양식 요소를 화면에 쓰는 대신 양식을 표시하기 만하면됩니다. 이렇게하면 #info-client에 도달 할 때마다 양식을 다시 쓰지 않으므로 #finish을 쉽게 관리 할 수 ​​있습니다.

도움이되는지 확인하십시오.