having trouble with events on dynamically added objects (again)

having trouble with events on dynamically added objects (again)

Again I'm struggling with events on dynamically added elements.

is there something I'm missing? The code works fine for elements that exist on startup..

  1. $(".product-like-wrap").on("click", ".symbol-circle", function () {
  2.     C.Ajax.Invoke(null, "Api", "LikePicture", { id: id }, {}, "POST", function (data) {
  3.         let $wrap = $caller.closest(".product-like-wrap");
  4.         $($wrap).find(".check-symbol").removeClass("hide");
  5.         $($wrap).find(".symbol-circle").addClass("hide");
  6.         $($wrap).find(".exists > .inner > .count").html(data.length);
  7.         $($wrap).find(".exists").removeClass("hide");
  8.     });
  9. });

the like-wrap div below is static, but all content is added after startup.

  1. <div class="like-wrap">
  2.     <div class="product-like-wrap flex-center-center">
  3.         <span class="check-symbol hide" title="Du har likt bilde"><i class="fas fa-check"></i></span>
  4.         <div class="symbol-circle align-center " title="Lik bilde" data-id="112">
  5.             <i class="fas fa-thumbs-up symbol" data-id="112"></i>
  6.         </div>
  7.         <span class="exists hide"><span class="inner"><span class="separator">/</span><span class="count">0</span></span></span>
  8.     </div>
  9. </div>

--------------
Just so we're clear - you need a hero?