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" 事件代替 "change"，例如：

$(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>

Answer 2

这不是更改事件。你可以使用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 3

使用 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>

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

Jquery Change() not working on a dynamically injected element

html

css

jquery

jquery-events