0

I notice my event is stop binding after it gets replaced by $.html

const html = `
<div id="container">
  <button id="trigger-replace">trigger replace</button>
</div>`

$('#trigger-replace').click(function () {
    console.log('trigger-replace')
    $('#container').html(html)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container">
  <button id="trigger-replace">trigger replace</button>
</div>

if you look at the console.log, the trigger-replace message is not showing.

the fiddle is just an example.

in real world, I'm replacing the whole page which has probably +50 events (click, change, you name it)

please help

mending3
  • 710
  • 4
  • 14
  • `$('#container').html(html)` doesn’t really make sense. Why do you put a `
    ` inside an existing `
    `? At any rate, jQuery has several other [DOM manipulation methods](//api.jquery.com/category/manipulation/) other than `.html`. Why not use those?
     – Sebastian Simon Jan 28 '22 at 14:38

0 Answers0