JQuery - не удалось обновить существующее имя новым именем

Question

Привет, на самом деле я работаю над jQuery.Здесь я написал код для обновления названия моего проекта.для этого я дал поле ввода и кнопку сохранения.Я получаю название проекта и отображаю его в поле ввода.После редактирования поля ввода, когда я нажимаю кнопку сохранения, имя проекта заменяется любым именем в поле ввода.Итак, здесь я сталкиваюсь с проблемой, когда я обновляю значение.Пожалуйста, помогите мне.Заранее спасибо.

$(document).ready(function() {
  $(".detail-wrp").on("click", function() {
    let inputVal = $(".prjt-nme", this).text();
    $(".prjt-nme", this).hide();
    $(".update-wrp", this).show();
    $(".detail-input", this).val(inputVal).focus().select();
    return false;
  });
  $(".detail-save-btn").on("click", function() {
    $(".prjt-nme").css({
      "display": "block"
    });
    $(".update-wrp").css({
      "display": "none"
    });
    let pk = $(this).parents(".detail-wrp").find(".detail-input").val();
    $(this).parents(".detail-wrp").find(".prjt-nme").text(pk);
  });
});

.general-settings>div {
  display: flex;
  padding: 6px 10px 6px 10px;
  width: 100%;
  cursor: pointer;
}

.general-settings>div:first-child {
  padding-top: 10px;
}

.general-settings>div:hover {
  background: #e9e9e9;
}

.general-settings>div:hover .prjt-edit-icon {
  display: block;
}

.general-settings>div>div:first-child {
  width: 40%;
}

.general-settings>div>div:last-child {
  width: 60%;
}

.general-settings>div>div .prjt-nme a {
  display: none;
}

.general-settings>div>div .prjt-nme a i {
  margin-top: 2px;
  margin-right: 10px;
}

.general-settings .update-wrp {
  display: none;
}

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<div class="general-settings">
  <div class="detail-wrp">
    <div>Project Name</div>
    <div>
      <div class="prjt-nme">ACTSLaw.comA1 <a href="#" class="float-right prjt-edit-icon"><i class="fas fa-pencil-alt"></i></a></div>
      <div class="update-wrp">
        <div>
          <input type="text" class="form-control detail-input" name="">
        </div>
        <div class="pt-1 clearfix d-flex update-and-cancel">
          <div>
            <button class="form-control detail-save-btn">Save</button>
          </div>
          <div>&nbsp;&nbsp;or&nbsp;&nbsp;<a href="#" class="detail-cancel-link">Cancel</a></div>
        </div>
      </div>
    </div>
  </div>
  <div class="detail-wrp">
    <div>Project Name</div>
    <div>
      <div class="prjt-nme">abcdefgh.comA1 <a href="#" class="float-right prjt-edit-icon"><i class="fas fa-pencil-alt"></i></a></div>
      <div class="update-wrp">
        <div>
          <input type="text" class="form-control detail-input" name="">
        </div>
        <div class="pt-1 clearfix d-flex update-and-cancel">
          <div>
            <button class="form-control detail-save-btn">Save</button>
          </div>
          <div>&nbsp;&nbsp;or&nbsp;&nbsp;<a href="#" class="detail-cancel-link">Cancel</a></div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Обновите ваш клик редактирования следующим образом:

    $(".prjt-nme").on("click", function() {
    let inputVal = $(this).text();
    $(this).hide();
    $(this).next().show();
    $(".detail-input", this).val(inputVal).focus().select();
    return false;
    });

Более того, вам нужно поместить название проекта в <span> и обновить функцию сохранения, чтобы снова отобразить значок карандаша.

<div class="prjt-nme"><span>abcdefgh.comA1</span> <a href="#" class="float-right prjt-edit-icon"><i class="fas fa-pencil-alt"></i></a></div> //html 

$(this).parents(".detail-wrp").find(".prjt-nme > span").html(pk); //in save function

Answer 2

$(".update-wrp", this).show();

Прокомментируйте это.Команда .show () будет показывать его, пока вы не дадите другой код, чтобы от него не сфокусироваться.Вы можете добавить пару .focus, чтобы контролировать его, или, что еще лучше, закомментировать и протестировать его снова