Jquery Change（）不处理动态注入的元素

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>

Answer 2

使用keyup事件而不是'change'或'input'，因为它在释放键时触发事件。

$(document).ready(function () {      
  //ON KEYUP
  $('.container').on('.editable', 'keyup', function (){
    alert('fire on change');
  });
});

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

使用“输入”事件代替“更改”，如：

$(document).ready(function () {
  
  //ON CHNAGE
  $('.container').delegate('.editable', 'input', 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>