Почему скрипт, заменяющий тег по клику, начинает грузить страницу после нескольких вызовов?

Question

Данный скрипт предназначен для визуального редактирования вставленного в textarea текста.

При нажатии на одну из строчек стиха можно редактировать данную строку, клик вне области сохраняет изменения.

Всё успешно работает, но на пятой-восьмой редакции строк по порядку начинает подвисать страница. Подскажите, пожалуйста, что я делаю не так.

$('.redact-textarea').bind('input propertychange', function() {
  var texareaVal = $('.redact-textarea').val();
  $('.col-like-ss').html(texareaVal);
  spanToInput();
});
function spanToInput() {
  $('.songText span').click(function(){
    var spanText = $(this).text();
    var spanValue = "<input value='"+spanText+"'>";
    $(this).replaceWith(spanValue);
    var $curentSpan = $('.col-like-ss').find('input[value="'+spanText+'"]');
    $curentSpan.focus().val('').val(spanText);

    $(document).mouseup( function(e){
      var div = $curentSpan;
      if ( !div.is(e.target)
        && div.has(e.target).length === 0 ) { 
        var commonVal = div.val();
        var backToP = "<span>"+commonVal+"</span>";
        div.replaceWith(backToP);
        spanToInput();
      }
    });
  });
}

span {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="redact-row d-flex songInformation-texts">
<!-- Впишите что-нибудь дополнительно в textarea, чтобы скрипт заработал -->
<textarea class="redact-textarea" cols="70" rows="10">
Впишите что-нибудь дополнительно в textarea, чтобы скрипт заработал
  <div class="songText">
    <span>У лукоморья дуб зеленый</span>
    <span>Златая цепь на дубе том</span>
    <span>И днем и ночью кот ученый</span>
  </div>
</textarea>
<div class="col-like-ss rightSong-col translate-lang col"></div>
</div>

Answer 1

Всё просто, вы навешиваете всё новые и новые обработчики внутри обработчиков. Например каждый раз при вызове spanToInput навешивается ещё один слушатель клика к элементу .songText span к уже имеющимся слушателям. А при клике навешивается ещё один слушатель mouseup для документа.

Поэтому и начинает грузиться.

Надо все обработчики оформлять отдельно. Либо выключать и включать их заново

БЛОГ НА HUSL

Почему скрипт, заменяющий тег по клику, начинает грузить страницу после нескольких вызовов?

Ответы (1 шт):