如何用.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>