Почему не работает код JS?

Question

[Антон]

Есть такой код, работает

spoiler

<div id="upr" style="display:none;position:relative;z-index:9999;">
<a data-left="-10"><i class="fa fa-arrow-left fa-4x" aria-hidden="true"></i></a>
<a data-left="7"><i class="fa fa-arrow-right fa-4x" aria-hidden="true"></i></a>
<a data-top="-5"><i class="fa fa-arrow-up fa-4x" aria-hidden="true"></i></a>
<a data-top="10"><i class="fa fa-arrow-down fa-4x" aria-hidden="true"></i></a>
</div>
<script>
$('a').click(function() {
  var
    $el = $('#overlay'),
    left = parseInt($el.css('left')),
    top = parseInt($el.css('top')),
    leftChange = $(this).data('left') | 0,
    topChange = $(this).data('top') | 0;
  $('#overlay').css({
    left: `${left + leftChange}px`,
    top: `${top + topChange}px`
  })
})
</script>

Но мне нужно разместить содержимое div id="upr" внутри

spoiler

<script type="text/template" id="template">
....код сторонних разработчиков + хочу сюда добавить вышенаписанный код
</script>

Размещаю внутри - отображается, но не работает (не двигается стрелками), вывожу за пределы script type="text/template" - работает.

Answer 1

[Владимир Проскурин]

Код написанный в
<script type="text/template" id="template">
не создает DOM элементы, он содержит обычный текст. К элементам из него через js обращаться нельзя, т.к. их не существует (там обычный текст).

Comments

[Антон]

как быть?

[Владимир Проскурин]

Антон, не знаю. Мне не понятно, зачем вам так хочется все запихать в этот блок. Может достаточно просто создать div с display:none? Если это какой-то рекламный блок, то достаточно думаю будет этому диву присвоить такой же id, как и в script