Как установить значение для ввода, поданного из другого текста, и обновить текст на основе ввода пользователем

Question

У меня есть сценарий, из которого можно увидеть какое-то название. Существует кнопка «Изменить». Если пользователь нажмет на эту кнопку, этот текст будет преобразован во входной файл. Значение должно быть таким названием. Когда пользователь вводит что-либо и нажимает кнопку «Обновить», этот заголовок должен быть изменен в соответствии с текстом ввода пользователя. Например,

Существует название «Пользователь» и кнопка «Изменить». Когда пользователь нажимает кнопку «Изменить», сценарий будет изменен следующим образом: <input type="text" value="User">. И эта кнопка «Изменить» будет изменена на кнопку «Обновить». Когда пользователь вводит что-либо (например: Person) и нажимает кнопку «Обновить», входной файл будет удален, а «Обновить» снова изменится на «Изменить». так что тогда будет заголовок «Человек» и кнопка «Изменить». Я попытался это сделать. Но, поскольку я не очень хорошо разбираюсь в jQuery, я не могу сделать это отлично. Пожалуйста, помогите мне правильно сделать функциональность. Here is my fiddle.

Я думаю, если я могу исправить эту строку, моя функциональность будет правильно:

$('.title-input').val($(this).parent().find('.title').text()); 

**************** Update ***** ***************************

I can see a very similar question is posted at some minutes ago. В этом решении, каждое название может быть принят для установки начального значения ввода как таким образом:

columns.each(function(){ 

      var txt = $(this).text(); 
      var input = $('<input type="text">'); 
      input.val(txt); 
      $(this).html(input); 

     }); 

Но, шахта не связана с таблицей. Итак, как я могу исправить эту строку для установки начального значения входного файла?

$('.title-input').val($(this).parent().find('.title').text()); 

Answer 1

Адрес working JSFiddle.

Пара вещей.

$("body").on('click', '.update', function() { 
    $('.title-input').keyup(function() { 
    // ... 

Во-первых, вы создаете новый обработчик событий для .title-input каждый раз, когда кнопка Update будет нажата. Это вызовет функцию keyup как миллиарды раз после нескольких «обновлений», но вы хотите, чтобы она вызывалась один раз. Вам нужно переместить его из делегата события.

Во-вторых, вам нужно подумать о том, что делает $('.title-input').val($(this).parent().find('.title').text());. Что такое this в этой области? Кнопка «Изменить» - и ее родительский элемент - body. Таким образом, вы найдете все элементы с классом заголовков в body и объедините их все вместе и установите это значение для каждого из названий.

Чтобы исправить это (и я его жестко запрограммировал), я дал каждому title div свой собственный уникальный идентификатор, так что строка задает определенный заголовок по одному.

$('#user').val($('#user').parent().find('.title').text());