Как добавить кнопку отмены для редактируемого поля «contenteditable»?

Question

Я хочу добавить кнопку отмены к этим редактируемым полям, что сделало бы поле недоступным для редактирования и отменило текущие сделанные изменения.

$('button').on('click', function() {
  if ($(this).hasClass('save')) {
    alert("Saved!!!");
    $(this).text("Edit").removeClass('save');
    $('.company').attr('contenteditable', 'false').css({
      'border': 'none',
      'outline': 'none'
    });
  } else {
    $(this).text("Save").addClass('save');
    $('.company').attr('contenteditable', 'true').css({
      'border': 'black solid 1px',
      'outline': 'none'
    }).focus();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row text-center company">Company Name</div>
<button class="btn btn-default edit">Edit</button> <button class="btn btn-default cancel">Cancel</button>

Answer 1

Я немного изменил ваш код, а затем добавил событие click для вашей кнопки cancel:

$('button.edit').on('click', function() {
  if ($(this).hasClass('save')) {
    alert("Saved!!!");
    $(this).text("Edit").removeClass('save');
    $('.company').attr('contenteditable', 'false').css({
      'border': 'none',
      'outline': 'none'
    });
  } else {
    $(this).text("Save").addClass('save');
    $('.company').attr("data-oldText",$('.company').text())
    $('.company').attr('contenteditable', 'true').css({
      'border': 'black solid 1px',
      'outline': 'none'
    }).focus();
  }
});

$('button.cancel').on("click", function() {
  if ($('button.edit').hasClass('save')) {
    $('.company').text($('.company').attr("data-oldText"))
    $('button.edit').text("Edit").removeClass('save');
    $('.company').attr('contenteditable', 'false').css({
      'border': 'none',
      'outline': 'none'
    });
  }
});

Я добавил $('.company').attr("data-oldText",$('.company').text()), поэтому, когда вы нажимаете edit, он «сохраняет» старые данные.

Затем, если вы нажмете cancel, текущий текст будет заменен старым.

Рабочая демоверсия

$('button.edit').on('click', function() {
  if ($(this).hasClass('save')) {
    alert("Saved!!!");
    $(this).text("Edit").removeClass('save');
    $('.company').attr('contenteditable', 'false').css({
      'border': 'none',
      'outline': 'none'
    });
  } else {
    $(this).text("Save").addClass('save');
    $('.company').attr("data-oldText", $('.company').text())
    $('.company').attr('contenteditable', 'true').css({
      'border': 'black solid 1px',
      'outline': 'none'
    }).focus();
  }
});

$('button.cancel').on("click", function() {
  if ($('button.edit').hasClass('save')) {
    $('.company').text($('.company').attr("data-oldText"))
    $('button.edit').text("Edit").removeClass('save');
    $('.company').attr('contenteditable', 'false').css({
      'border': 'none',
      'outline': 'none'
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row text-center company">Company Name</div>
<button class="btn btn-default edit">Edit</button> <button class="btn btn-default cancel">Cancel</button>