Почему prop ('outer HTML') удаляет события и как это предотвратить?

Question

const continueButton = $("<button>Doesn't work.</button>").click(() => {alert("hello")});
$(".content").append(continueButton.prop('outerHTML'));          
$(".content").append ($("<button>Works.</button>").click(() => {alert("hello")}))

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

</div>

Я задаю этот вопрос потому, что мне нужно передать строковую версию некоторого HTML функции. По этой причине я не могу использовать .append. но когда я использую приведенный выше код, кажется, что событие click больше не работает.

Как я могу получить HTML в виде строки, но чтобы событие click все еще работало?

Еще один контекст: я использую библиотеку, которая ожидает, что я добавлю к ней HTML как строку. Но я хочу добавить HTML с кнопкой, которая срабатывает при нажатии. Я использую jQuery для создания HTML, но когда я пытаюсь передать строку HTML в библиотеку, кнопки не работают.

Answer 1

Вы можете делегировать событие элементу содержимого и использовать button в качестве целевого селектора

// add delegated event listener before inserting buttons
$('.content').on('click', 'button', (e) => console.log($(e.target).text()))

const continueButton = $("<button>Doesn't work.</button>");
$(".content").append(continueButton.prop('outerHTML'))
             .append ("<button>Works.</button>");
             
            

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

</div>

Answer 2

В строке 1 к объекту прикреплено событие, но это не отражено в HTML. Поэтому, когда вы добавляете outerHTML к элементу, браузер создает новый элемент, но события не определены в HTML, поэтому они не существуют.

Если вы вставляете скрипт внутри кнопки HTML, тогда он будет работать, если вы примените этот HTML в разных местах: $('<button onclick="alert(\'hello\');">Test</button>').