如何用.ajax创建保存按钮（）

Question

我有两个按钮，一个编辑和一个保存。当用户点击编辑时，输入框变得可访问。我怎样才能让保存按钮正常工作？意思是，当用户点击“保存”时，他们输入的文本将更新到数据库。我有下面的代码，编辑按钮的作品，但当我点击保存按钮，它会消失，'编辑'按钮变得无法访问。请帮忙！

JS：

$(".home").html('<label>Name:</label><input id="editInput" disabled="true" id="userFullName" value="' + ui.fullName +'" type="text"><button class="edit">Edit</button><button class="save">Save</button>'); 
$(".edit").click(function (e) { 

       $("#editInput").prop('disabled',false); 
      }); 

      $(".save").click(function (e) { 
       $(this).closest('div').find('input').attr('readonly', 'readonly'); 
       $(this).closest('div').find('.save').hide(); 
       $(this).closest('div').find('.edit').show(); 
       var inputValue=$(this).closest('div').find('input').val(); 
       $.ajax({ URL:"https://api.mlab.com/api/1/databases/spk-db/collections/dwUsers/58f62d66c2ef164e6b93a162?apiKey=apiKey", 
        type:"POST", 
        data:{ inputValue:inputValue }, 
        success:function(data){ 
            swal("Congrats", "Your name has been saved!", "success");  
           } 
       }); 
       }); 


      } 

Answer 1

请检查下面的代码行：

$(this).closest('div').find('input').attr('readonly', 'readonly'); 

当您单击保存按钮，上面的代码使输入只读

。因此看起来编辑按钮已变得无法访问（如您的问题所述）。

$(this).closest('div').find('.save').hide(); 

上面一行隐藏了保存按钮。

解决方案

变化click事件对编辑按钮的代码如下：

$(".edit").click(function (e) { 

      $("#editInput").prop('disabled',false); 

      // Make input accessible 
      $("#editInput").prop('readonly', false); 

      // Show the save button 
      $(".save").show(); 
     }); 

$(document).ready(function(){ 
 

 
\t \t \t 
 

 
\t \t \t $(".home").html('<label>Name:</label><input id="editInput" disabled="true" id="userFullName" value="" type="text"><button class="edit">Edit</button><button class="save">Save</button>'); 
 
\t \t \t $(".edit").click(function (e) { 
 

 
\t \t \t \t $("#editInput").prop('disabled',false); 
 
\t \t \t \t $("#editInput").prop('readonly', false); 
 
\t \t \t \t $(".save").show(); 
 
\t \t \t }); 
 

 
\t \t \t 
 

 
\t \t \t $(".save").click(function (e) { 
 
     $(this).closest('div').find('input').prop('disabled',true); 
 
\t \t \t \t $(this).closest('div').find('input').attr('readonly', 'readonly'); 
 
\t \t \t \t $(this).closest('div').find('.save').hide(); 
 
\t \t \t \t $(this).closest('div').find('.edit').show(); 
 
\t \t \t \t var inputValue=$(this).closest('div').find('input').val(); 
 

 
\t \t \t \t $.ajax({ URL:"https://api.mlab.com/api/1/databases/spk-db/collections/dwUsers/58f62d66c2ef164e6b93a162?apiKey=apiKey", 
 
\t \t \t \t \t type:"POST", 
 
\t \t \t \t \t data:{ inputValue:inputValue }, 
 
\t \t \t \t \t success:function(data){ 
 
\t \t \t \t \t \t alert('name saved'); 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t error: function(){ 
 
\t \t \t \t \t \t alert('ajax error. Maybe StackOverflow does not allow ajax requests'); 
 
\t \t \t \t \t } 
 
\t \t \t \t }); 
 
\t \t \t }); 
 

 

 
\t \t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="home"></div>