Question

我是Jquery和javaScript的新手，我正在尝试执行以下操作：

我在表格中有一个文本字段。我希望能够将其更改为输入字段，当用户单击按钮时，将其保存在db中（通过使用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/

我有一种预感，通过重新设置图标，我以某种方式“失去”与点击功能的连接，但我不确定应该如何解决它。

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>？

＆＃13;

$(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);
  }
})

＆＃13;

<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>

＆＃13;

Answer 2

更新：在这里看演示 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。

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

jquery：将数据从输入切换到文本并返回

2 个答案: