Как реализовать смену текста?

Question

[Webdozerz]

Нужно реализовать простую смену ника, но моих знаний пока не хватает. Есть близкие варианты?

Набросал вот такой вот бред:

$(function (){ 
    $('.changeLog').click(function(){  //клик по ручке/редактированию
       $('.log-result').append('<input type="text" placeholder="Введите новый логин" class="chngL">' + '<input type="button" class="chngOk" value="Сохранить">');  //div со старым ником
       $('.chngOk').click(function(){ //так вообще можно?Я ведь только ее создал
        $('.log-result').html(text);
       });
    });
});

Answer 1

[ThunderCat]

Создайте 2 элемента:
1) див или спан с именем и иконкой редактирования,
2) инпут и кнопку в общем элементе, общему элементу поставьте дисплей:нон.
по клику на карандаш - содержимое первого элемента(логин) копируете в инпут, первый элемент хайдите, второй показываете. По кнопке делаем наоборот - в логин заносим содержимое инпута, второй элемент хайдите, первый показываете.
удобнее конечно разбить на несколько разных элементов, думаю со структурой разберетесь сами.

Answer 2

[Stalker_RED]

//так вообще можно?

Да.

$('.log-result').html(text);

Переменная text не определена?

chngL
chngOk

- отличные названия классов в стиле "чтоб никто не догадался, и чтоб я сам через пол года не смог вспомнить что это такое".

Answer 3

[Марат Гарифуллин]

Так можно, но вдруг у вас будет много динамических элементов с одинаковым функционалом, тогда лучше так

$(document).on('click', '.chngOk', function(e) {
  $('.log-result').html(text);
});

И не пишите все в одну строку

let html = 
html += '<input type="text" placeholder="Введите новый логин" class="chngL">';
html += '<input type="button" class="chngOk" value="Сохранить">';
$('.log-result').append(html);