jQuery的：從切換輸入數據，文本和背部

Question

我很新的jQuery和JavaScript和我試圖做到以下幾點：

我在一個表中有一個文本字段。我希望能夠將其更改爲輸入字段，並且當用戶單擊某個按鈕時，將其保存在數據庫中（通過使用Ajax調用）並再次將其更改回文本。

我已經能夠做到這一點，但奇怪的是，它只保存一次，保存後，你不能再次編輯相同的領域，除非我刷新頁面。

的HTML是：

<table class="table table-bordered"> 
    <tr> 
    <td>My data field :</td> 
    <td id="MyDataField">123 <i class="fa fa-pencil-square-o fa-fw" id="editMyDataField" style='float: right' /></td> 
    </tr> 
</table> 

的JavaScript是：

$('#editMyDataField').on('click', function() { 
    //First clikck, change the table cell into a input field, with the current text value and change icon 
    $('td#MyDataField').html($('<input />', { 
    'value': $('td#MyDataField').text() 
    })); 
    $('td#MyDataField').append('<i class="fa fa-check" id="editMyDataField" style="float: right"/>') 

    //Second click, do something with the vale (for instance Ajax call), change field back to text with the new value, and change icon 
    $('#editMyDataField').on('click', function() { 
    alert("Save value in db: " + $('td#MyDataField input').val()) 
    $('td#MyDataField').html($('td#MyDataField input').val() + '<i class="fa fa-pencil-square-o fa-fw" id="editMyDataField" style="float: right"> '); 
    }) 
}) 

我創建了一個的jsfiddle來演示該問題：https://jsfiddle.net/2zkbvhoL/

我有一種預感，由repacing的圖標，我不知何故「失去」與點擊功能的連接，但我不知道該如何解決它。

Answer 1

我認爲更改結構將是一個更好的解決方案。

相反的：123 <i class="fa fa-pencil-square-o fa-fw" id="editMyDataField" style='float: right' />

爲什麼不：<span class="text">123</span><input class="edit" type="text"><button type="button"><i ...></i></button>？

$(function(){ 
 
    $(".edit-btn").click(function(){ 
 
    var $field = $(this).closest(".field"); 
 
    if (!$field.data("editing")) { 
 
     $field.data("editing", true); 
 
     $field.find(".edit-input").val($field.find(".text").text()).show(); 
 
     $field.find(".edit-btn").hide(); 
 
     $field.find(".ok-btn").show(); 
 
     $field.find(".text").hide(); 
 
    } 
 
    }) 
 
    
 
    $(".ok-btn").click(function(){ 
 
    var $field = $(this).closest(".field"); 
 
    if ($field.data("editing")) { 
 
     $field.find(".edit-input").attr("disabled", true); 
 
     runAjax($field, function(){ 
 
     $field.find(".edit-input").attr("disabled", false); 
 
     $field.data("editing", false); 
 
     $field.find(".edit-input").hide(); 
 
     $field.find(".edit-btn").show(); 
 
     $field.find(".ok-btn").hide(); 
 
     $field.find(".text").show(); 
 
     }); 
 
    } 
 
    }) 
 
    
 
    function runAjax($field, cb) { 
 
    //your ajax here. Below is just a delay for demoing 
 
    setTimeout(function(){ 
 
     //If ajax OK, you would want to change the text to the input's value 
 
     $field.find(".text").text($field.find(".edit-input").val()); 
 
     if (typeof cb === "function") 
 
     cb(); 
 
    }, 1000); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div data-editing="false" class="field"> 
 
    <span class="text">123</span> 
 
    <input class="edit-input" type="text" style="display:none"> 
 
    <button type="button" class="edit-btn">Edit</button> 
 
    <button type="button" class="ok-btn" style="display:none">OK</button> 
 
</div>

Answer 2

UPDATE： 觀看演示這裏 https://jsfiddle.net/2zkbvhoL/7/

嘗試使用

$('table').on('click','#editMyDataField', function() { 
// your code here... 
})) 

相反表，你也可以使用文檔以及在兩個地方進行更改。

所以這個代碼應該爲你工作：

$('table').on('click','#editMyDataField', function() { 
    //First clikck, change the table cell into a input field, with the current text value and change icon 
    $('td#MyDataField').html($('<input />', { 
    'value': $('td#MyDataField').text() 
    })); 
    $('td#MyDataField').append('<i class="fa fa-check" id="saveMyDataField" style="float: right"/>') 

    //Second click, do something with the vale (for instance Ajax call), change field back to text with the new value, and change icon 
    $('table').on('click','#saveMyDataField', function() { 
    alert("Save value in db: " + $('td#MyDataField input').val()) 
    $('td#MyDataField').html($('td#MyDataField input').val() + '<i class="fa fa-pencil-square-o fa-fw" id="editMyDataField" style="float: right"> '); 
    }) 
}); 

改變editMyDataField是saveMyDataField在功能上的內側。

儘管這只是對您的解決方案的快速修復。您可以刪除嵌套的事件綁定，並將事件分別附加到兩個按鈕（編輯和保存圖標）