Почему текст не возвращается к своему изначальному состоянию?

Question

Есть вот такой код:

let title = $('#title').text()
$('#copy').click(function() {
    copyText(title)
$(this).text('(Title Copied!)')

setTimeout(function() {
    $(this).text('(Copy Title)')
}, 2000)

})
function copyText(str) {
  return navigator.clipboard.writeText(str)
}

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

<h2>Title Example</h2>
<span>Dolore velit sunt deserunt id laboris voluptate est ad eu dolor ad et anim sunt non id incididunt.</span> <br>
<a href="javascript:void(0);">
  <span id="copy">(Copy Title)</span>
</a>

Почему текст не возвращается в исходное состояние? Вроде бы никаких ошибок не выводится и синтаксис в проядке, что же тогда не так?

Answer 1

Всё просто, как уже упомянул @splash58, нужно занести элемент (а точнее объект jQuery), в переменную. Вы спросите, как вам это поможет? А всё просто, вы пытаетесь обратиться к текущему элементу в другой функции, одна функция, один контекст, вторая функция второй контекст, всё просто. Вот пример рабочего кода:

let title = $('#title').text()
let $copyBtn = $('#copy')
$copyBtn.click(function() {
  copyText(title)
$copyBtn.text('(Title Copied!)')
setTimeout(function() {
    $copyBtn.text('(Copy Title)')
  }, 2000)
})
function copyText(str) {
  return navigator.clipboard.writeText(str)
}

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

<h2>Title Example</h2>
<span>Dolore velit sunt deserunt id laboris voluptate est ad eu dolor ad et anim sunt non id incididunt.</span> <br>
<a href="javascript:void(0);">
  <span id="copy">(Copy Title)</span>
</a>