Запуск проверки правописания после изменения атрибута

Question

У меня есть спорный div с проверкой орфографии на false.У меня есть кнопка, которая при нажатии изменяет атрибут проверки орфографии на true, но проверка орфографии не срабатывает, пока я не нажму внутри элемента div.Я попытался вызвать события для щелчка, фокусировки, размытия, изменения и т. Д. На div, и ничто не вызывает появление красных линий.Это в старом jQuery 1.8 (устаревшее приложение).есть ли хитрость в этом?

$('.spellcheck').live('click', function() {
    $('#editor').attr('spellcheck', true);
    $('#editor').click();
    $('#editor').focus();
    $('#editor').blur();
    $('#editor').change();
});

Я также обернул события в 1-секундный setTimeout, чтобы обойти любые асинхронные условия гонки, но не повезло.

HTML Part:

<div id="editor" class="editor" contenteditable spellcheck="false"></div>
<button class="spellcheck">Check Spelling</button>

• Это не проблема contenteditable, это также происходит с обычным div.

Answer 1

Нажмите кнопку, добавится атрибут spellcheck, а затем будет установлен фокус на #editor div.Проверка орфографии активна и подчеркивает слова с ошибками.

Вот оно в jQuery 1.8.1 :

$('.spellcheck').click( function () {
    $('#editor').attr('spellcheck', true);
    $('#editor').focus();
});

#editor {
  width: 200px;
  height: 100px;
  border: 1px solid #e0e0e0;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

<div id="editor" contenteditable spellcheck="false">
   somme mispellled wordds
</div>
<button class="spellcheck">Check Spelling</button>

Этот же код в другом фрагменте, этот работает jQuery 1.2.3 :

$('.spellcheck').click( function () {
    $('#editor').attr('spellcheck', true);
    $('#editor').focus();
});

#editor {
  width: 200px;
  height: 100px;
  border: 1px solid #e0e0e0;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div id="editor" contenteditable spellcheck="false">
   somme mispellled wordds
</div>
<button class="spellcheck">Check Spelling</button>