Jquery：使用Ajax進行內聯編輯的多個元素

Question

我在「表」中有多個（百個）「span」元素。如果點擊了某個元素，我只希望將一個span元素內聯編輯，並將數據發送到mySQL以動態更新字段。我做了搜索，我無法找到答案

<?php 
// db connect and SELECT query done here... 
    while($row = $result->fetch_assoc()){ 

    echo '<tr bgcolor="'.$bgcolor.'"><td><b>'.$row['eventTitle'] . '</b></td><td>'. $row['dateYear'] .'</td><td>'.$row['characterPOV'].'</td></tr>'; 
    echo '<tr><td colspan=3><span id="tb" >'.$row['desc'] . '</span></td></tr>'; 
} 
?> 

的Jquery：

<script> 
     $('document').ready(function(){ 
     $("span#tb").on("click", function() { 
      var html = $('span#tb').html(); 
       $('span#tb').replaceWith('<textarea style="width:100%;">'+html + '\r\n </textarea>').html().focus(); 
       $.get('inc/updateDesc.php' ,function(data) { 
        $('#tb').append(data); 
       }); 
       return false; 
      }) 
     }); 
</script> 

目前，如果span元素被點擊每個span元素被一個textarea替代 - 我只想元素已被點擊被替換爲textarea，以便它可以內聯編輯

什麼是代碼高效的負責任的方式來做到這一點？記得跨度元件可以是幾百個號碼作爲其內容存儲在數據庫

Answer 1

的變化ID類：

class="tb" 

現在的JS，你可以這樣做：

$(document).ready(function(){ 
    $("span.tb").on("click", function() { 
     var $this = $(this); // this is clicked span. 
     var html = $this.html(); 
      $this.replaceWith('<textarea style="width:100%;">'+html + '\r\n </textarea>').html().focus(); 
      $.get('inc/updateDesc.php' ,function(data) { 
       $this.append(data); 
      }); 
      return false; 
     }) 
    });