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。它已被弃用。

＆＃13;

$(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');
  })
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用keyup事件代替＆＃39;更改＆＃39;或者＆＃39;输入＆＃39;因为当一个键被释放时它会触发一个事件。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

使用＆＃34;输入＆＃34;事件代替＆＃34;改变＆＃34;，如：

＆＃13;

$(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');
  })
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: