Как сделать что бы после .clone кнопка выполняла скрипт?

Question

[mrzgt]

Есть кнопка

<div id="mobmenu">
<nav id="menu" class="menu">
menu
</nav>
<main id="main" class="panel">
<button class="toggle js-slideout-toggle">☰</button>
</main>
</div>

var slideout = new Slideout({
  'panel': document.getElementById('main'),
  'menu': document.getElementById('menu'),
  'padding': 256,
  'tolerance': 70
});

document.querySelector('.js-slideout-toggle').addEventListener('click', function() {
  slideout.open();
});

function close(eve) {
  eve.preventDefault();
  slideout.close();
}

slideout
  .on('beforeopen', function() {
    this.panel.classList.add('panel-open');
  })
  .on('open', function() {
    this.panel.addEventListener('click', close);
  })
  .on('beforeclose', function() {
    this.panel.classList.remove('panel-open');
    this.panel.removeEventListener('click', close);
  });

Ету кнопку клонирую при помощи
$('#mobmenu').clone().appendTo('#mobmenu_clone');

Клон кнопки перестает работать, подскажите как можно решить такую проблему

Answer 1

[zkrvndm]

Так и должно быть, при клонировании обработчики всегда слетают. Если хотите, чтобы не слетало, используйте onclick:

<button onclick="slideout.open();" class="toggle js-slideout-toggle">☰</button>

Либо после клонирования заново вешайте обработчики.

Comments

[mrzgt]

Спасибо, можете подсказать как вешать заново обработчик?

[zkrvndm]

mrzgt, old.code.mu/javascript/event/addEventListener.html