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在功能上的内侧。

尽管这只是对您的解决方案的快速修复。您可以删除嵌套的事件绑定，并将事件分别附加到两个按钮（编辑和保存图标）