добавляющих элементы и ReplaceWith() - JQuery

я пытаюсь дать пользователю возможность обновлять значение некоторых полей, связанные с ним, нажав на контейнер с именем # инфо-клиентом Здесь я прилагаю входные зоны после щелчок и после нажатия кнопки #finish, информация будет обновлена. Проблемы я получил в том, что информация о обновлялась еще они показали более чем один раз (2 раза или даже 3 ..)добавляющих элементы и ReplaceWith() - JQuery

$("#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>"); 

    }); 
});

источник

2016-06-15 Mohamed Oubella

Не могли бы вы привести пример проблемы в http://jsfiddle.net? Или, по крайней мере, добавьте свой HTML-код на вопрос –

Вот он: https://jsfiddle.net/3h79cv7o/ –

Вы должны знать, что '$ (" # info-client ")' делает запрос DOM и создает jQuery объект каждый раз, когда он выполняется. Вы можете в значительной степени оптимизировать свой код, кэшируя его: 'var $ infoClient = $ (" # info-client "); $ InfoClient.somestuff(); $ infoClient.otherStuff(); 'Вы также можете привязать команды:' $ infoClient.append (c1) .append (c2) .append (c3) ' –

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

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

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

источник

2016-06-15 13:24:41

добавляющих элементы и ReplaceWith() - JQuery

ответ

Смежные вопросы