Problem with like button refusing to trigger after using jquery to render content

Question

My like button was previously made using dom and my video section content was made via static html at first, the function was adding like once, removing it when user presses it again ( was working )

I created a function to render my video skeleton page in jquery which appends video info from an array now everything works except for my like button.

Likebutton code:

let thumbsUp = false;

$(".fixButtonsCounter").on("click", () => {
  console.log("Farhan")
  if (!thumbsUp) {
    thumbsUp = true;
    $(".icon55").html() = `<i class="fas fa-thumbs-up"></i>`;   //.innerHTML -->html()
    count.text()++;  //textContent -->.text()
  } else {
    thumbsUp = false;
    $(".icon55").html() = `<i class="far fa-thumbs-up"></i>`;
    $(".count55").text()--;
  }
});

Video Render code:

$(".batata4").on("click", function () {  //   TedXTalks RENDER
  console.log("CSS clicked")
  TedTalks.forEach((item, i) => {

  $(".video-section").append(`
        <article class ="video-container">              
        <a href="#" class="thumbnail">
        <iframe width="560" height="315" src="${item.src}" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
     
     </a>
     <div class="video-bottom-section">
         <a href="#">       
             <img class="channel-icon" src="http:///unsplash.it/36/36?gravity=center" alt="Your Channel" /> 
         </a>
         <div class="video-details"> 
            <a href="#" class="video-channel-name">${item.vcn}</a>
            <a href="#" class="video-title"> ${item.vt} </a>
            <button class="fixButtons"onclick="showVideoOne()">View</button>

            <button class="fixButtonsCounter">
                <span class="icon55"    id="icon"><i class="far fa-thumbs-up"></i></span>
                <span class ="count55"  id="count">0</span>
            </button>
         </div>  
     </div> 
    </article> `);
});
});

Array code:

 let TedTalks = [{src:"https://www.youtube.com/embed/JsC9ZHi79jo",vcn:"TEDx Talks",vt:"How to triple your memory by using this trick | Ricardo Lieuw On | TEDxHaarlem"},{src:"https://www.youtube.com/embed/esPRsT-lmw8",vcn:"TEDx Talks",vt:"The most important lesson from 83,000 brain scans | Daniel Amen | TEDxOrangeCoast"},{src:"https://www.youtube.com/embed/-KysuBl2m_w",vcn:"TEDx Talks",vt:"Choices that can Change your Life | Caroline Myss | TEDxFindhornSalon"}]

Can you please tell me where my problem is so that I can fix it, thank you!

Please note i tried to comment the entire like button code and only console log to check if it will print anything, even that is not working. — Ahmad Mraish, Aug 12 '21 at 11:23
Try `$(document).on("click",".fixButtonsCounter", function...` — freedomn-m, Aug 12 '21 at 11:24
Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Aug 12 '21 at 11:24
no clue @freedomn-m I will look! thanks for pointing me in the right direction — Ahmad Mraish, Aug 12 '21 at 11:26
it appears that it has something to do with what was dynamically rendered, so I need to bind to something else or to the document itself ? thats wierd . cant really understand it but thank you again ! — Ahmad Mraish, Aug 12 '21 at 11:31
Try this, change `$(".fixButtonsCounter").on("click", () => {` to `console.log($(".fixButtonsCount").length); $(".fixButtonsCounter").on("click", () => {` - it's likely this will be zero as those elements don't exist at the time the code runs, so there's nothing to attach the elements to. By using **event delegation** you attach the event to document (or something that does exist, such as a wrapper/container, but fall back to document) then filter to the element you want `$(document).on("click", .fixButtonsCounter"...` so it doesn't matter that they don't exist at the time the code runs. — freedomn-m, Aug 12 '21 at 11:38
yep i understood now! thanks alot, the function is now returning the consolelog but its not working :D giving me this Invalid left-hand side in assignment — Ahmad Mraish, Aug 12 '21 at 11:42
You can't do `..() = ...` just need to change to `$(".icon55").html(...);` — freedomn-m, Aug 12 '21 at 11:42

Problem with like button refusing to trigger after using jquery to render content

0 Answers0