Jquery Change() 不适用于动态注入(inject)的元素

Question

我有一个动态生成的<div class="editable">元素为 contenteditable="true" 。我需要触发一个更改此 div 内文本的事件。我用change()它不起作用。但同时blur()正在为我工​​作。有没有办法在 change() 上触发事件？

不幸的是，我无法使用像 <input> 这样的表单元素或<textarea> .

$(document).ready(function () {
  
  //ON CHNAGE
  $('.container').delegate('.editable', 'change', function (){
    alert('fire on change');
  })
  
  //ON BLUR
  $('.container').delegate('.editable', 'blur', function (){
    alert('fire on blur');
  })
});

.editable{
  width: 100px;
  height: 20px;
  line-height:20px;
  border: solid 1px black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="editable" contenteditable="true">editable</div>
</div>

Answer 1

这不是更改事件。您可以使用input，它是一个每当输入更改时就会触发的事件。

还可以使用.on代替.delegate。它已被弃用。

$(document).ready(function() {

  //ON CHNAGE
  $('.container').on('input', '.editable', function() {
    console.log('fire on change');
  })

  //ON BLUR
  $('.container').on('blur', '.editable', function() {
    console.log('fire on blur');
  })
});

.editable {
  width: 100px;
  height: 20px;
  line-height: 20px;
  border: solid 1px black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="editable" contenteditable="true">editable</div>
</div>