jQuery events not fired on loaded html

Question

Got a html page with a frequently changing part. That part is read by a script on the page:

<script>
  console.log('In HTML');
  fetch('changes/changes.html')
    .then(data => data.text())
    .then(html => document.getElementById('changes').innerHTML = html);
</script>

That works fine and makes publishing changes easy. However jQuery actions (in a separate script) on the read part don't work. The events are not triggered. How to fix that?

$(function () {
  console.log('In script');

   $('.change-card > .change-btn-action').on('click', function () {
     console.log('Click event');
   });
)};

The click event is never triggered. The log order is: In HTML, In script. Thanks for any help! Gerard

Is the `.change-btn-action` coming from the fetch html? Do you see the console.log("In script") ? — Carsten Løvbo Andersen, Sep 29 '20 at 07:50
Yes the .change-btn-action coming is from the fetch html. I do see the "In script" — Gerard, Sep 29 '20 at 07:54
Does this answer your question? [jQuery .live() vs .on() method for adding a click event after loading dynamic html](https://stackoverflow.com/questions/8752321/jquery-live-vs-on-method-for-adding-a-click-event-after-loading-dynamic-ht) — Carlo Moretti, Sep 29 '20 at 08:00
[Understanding Event Delegation](https://learn.jquery.com/events/event-delegation/) — charlietfl, Sep 29 '20 at 08:06

score 2 · Accepted Answer · answered Sep 29 '20 at 08:04

Attach an event handler on body tag or parent of the dynamic element in the page and pass the dynamic element as a selector.

 $('body').on('click', '.change-card > .change-btn-action', function () {
     console.log('Click event');
 });
 // or
 $('#changes').on('click', '.change-card > .change-btn-action', function () {
     console.log('Click event');
 });

score 0 · Answer 2 · answered Sep 29 '20 at 08:04

0

Try this

$('body').on('click','.change-btn-action', function () {
     console.log('Click event');
});

answered Sep 29 '20 at 08:04

Nguyen Nguyen

51
9

jQuery events not fired on loaded html

2 Answers2