时间戳

首页 > 解决方案 > 基于Jquery切换更改输入

jquery - 基于Jquery切换更改输入

问题描述

所以基本上，当我点击保存时，varname应该成为我在输入框中输入的新文本，而不是原来的名称。

但是，现在，无论我输入什么，它都会将其恢复为原始值。

$(document).ready(function() {
  $('.edit-name').on('click', function() {
    $(this).closest('div').find('span,input').toggle();
  });
  var name = $('#name').val();
  $('#submit').on('click', function() {
    $('#result').html(name);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="submit">Save</button>
<div id="result"></div>
<div class="editable">
  <span>John</span>
  <input type="text" id="name" name="name" value="John" style="display:none;" />
  <i class="edit-name">Edit</i>
</div>

标签： jqueryhtml

解决方案

因为您的namevar 已在文档准备就绪时进行了初始化。所以它具有您输入的初始值（这里是 John）。它应该被声明到点击上下文中。

$(document).ready(function() {
    $('.edit-name').on('click', function() {
      $(this).closest('div').find('span,input').toggle();
    });
    $('#submit').on('click', function() {
      var name = $('#name').val();
      $('#result').html(name);
    });
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="submit">Save</button>
<div id="result"></div>
<div class="editable">
  <span>John</span>
  <input type="text" id="name" name="name" value="John" style="display:none;" />
  <i class="edit-name">Edit</i>
</div>

推荐阅读