使用jquery

时间:2017-05-22 06:22:08

标签: javascript jquery

我在屏幕上显示文本,当我点击它时,我可以使用jquery编辑文本。
但我不知道如何将我编辑的文本重置为默认值并将文本提交到数据库。如果有人知道,请帮助我,提前谢谢。

jQuery.fn.extend({
live: function (event, callback) {
   if (this.selector) {
        jQuery(document).on(event, this.selector, callback);
    }
}
});
$(document).on('click', '.cmtedit', function (e) {
console.log(this);
   TBox(this);
});

$("input").live('blur', function (e) {
   RBox(this);
});
function TBox(obj) {
    var id = $(obj).attr("id");
    var tid = id.replace("cmt_edit_", "cmt_tedit_");
    var input = $('<input />', { 'type': 'text', 'name': 'n' + tid, 'id': tid, 'class': 'text_box', 'value': $(obj).html() });
    $(obj).parent().append(input);
    $(obj).remove();
    input.focus();
}
function RBox(obj) {
var id = $(obj).attr("id");
var tid = id.replace("cmt_tedit_", "cmt_edit_");
var input = $('<p />', { 'id': tid, 'class': 'cmtedit', 'html': $(obj).val() });
$(obj).parent().append(input);
$(obj).remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
 <div id="sample">
    <p id="cmt_edit_323" class="cmtedit">Sample Text</p>
 </div>
<div>
<button type="reset" class="btn btn-primary">Reset</button>
<button type="submit" class="btn btn-success" name="subtn">Submit</button>
</div>
</form>

1 个答案:

答案 0 :(得分:2)

尝试使用某个变量存储前一个值。然后重置单击将上一个值添加到函数

&#13;
&#13;
var before;
jQuery.fn.extend({
  live: function(event, callback) {
    if (this.selector) {
      jQuery(document).on(event, this.selector, callback);
    }
  }
});
$(document).on('click', '.cmtedit', function(e) {
  TBox(this);
});

$("input").live('blur', function(e) {
  RBox(this);
});
$('.btn-primary').click(function() {
  $("input").trigger('blur')
  console.log(before)
  $('.cmtedit').text(before)
})

function TBox(obj) {
  before = $(obj).text()
  console.log(before)
  var id = $(obj).attr("id");
  var tid = id.replace("cmt_edit_", "cmt_tedit_");
  var input = $('<input />', {
    'type': 'text',
    'name': 'n' + tid,
    'id': tid,
    'class': 'text_box',
    'value': $(obj).html()
  });
  $(obj).parent().append(input);
  $(obj).remove();
  input.focus();
}

function RBox(obj) {
  var id = $(obj).attr("id");
  var tid = id.replace("cmt_tedit_", "cmt_edit_");
  var input = $('<p />', {
    'id': tid,
    'class': 'cmtedit',
    'html': $(obj).val()
  });
  $(obj).parent().append(input);
  $(obj).remove();
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div id="sample">
    <p id="cmt_edit_323" class="cmtedit">Sample Text</p>
  </div>
  <div>
    <button type="reset" class="btn btn-primary">Reset</button>
    <button type="submit" class="btn btn-success" name="subtn">Submit</button>
  </div>
</form>
&#13;
&#13;
&#13;