Question

我已经设置了一些具有onblur功能的内容可编辑div

<div class="inline-edit" contenteditable="true"></div>

$(document).ready(function(){
$('div.inline-edit').blur(function()
{
  //functionality
});
});

并且所有功能都非常适合我设置的功能。

但问题是，即使可编辑div中的内容永远不会更改，模糊甚至会触发时也会始终显示功能！

由于onchange方法仅适用于输入/ textareas等我很好奇是否有一种简单的方式来做类似的事情：

$(document).ready(function(){
$('div.inline-edit').blur(function()
{
  if($('div.inline-edit').contentChanged())
  {
     //functionality
  }
});
});

Answer 1

如果只使用1个div，我会设置一个旧的和新的变量并在模糊时进行比较。

$(document).ready( () => {
  var oldVal = $('.inline-edit').val();

  $('.inline-edit').blur( () => {
    let newVal = $('.inline-edit').val();

    if (newVal === oldVal) {
      return
    }

    //functionality
  });

});

Answer 2

您还可以在keypress内找到div。

var changed = false;

$('#your-div').keypress(function (){
    changed = true;
});

或者，如果您的div数据非常简单，您可以保存原始内容并在需要时进行比较。

当div模糊检查内容变化时？

2 个答案: