Javascript- onclick event not working?

Question

My codes are

HTML

<div id="main">
<div class='hide' data-id='one'>Description one</div>
<div class='hide' data-id='two'>Descripttion two</div>
<div class='hide' data-id='three'>Description Three</div>
</div>

Javascript

$('.hide').click(function(){
    if($(this).data('id')=='one'){$('#main').html(myData)};
});

$('button').click(function(){alert('thank you');});

var myData = 'thank you<br/><button>previous</button>';

Why my button on click event i.e. alert isn't working?

Answer 1

Use event delegation.

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

$('#main').on('click','button',function(){alert('thank you');});