Intentando activar el evento de clic de a etiqueta con jQuery pero el evento está vinculado con el conjunto de datos de $.getJSON en una section .
El siguiente es el código de HTML:
...
const page=1, dataList=[]; $.getJSON('https://api.punkapi.com/v2/beers?page=' + page + '&per_page=25', function (beerList) { console.log(beerList) dataList.push(beerList); currentElements = renderFuntion(beerList); $('#dynamicData').html(currentElements); }); function renderFuntion(data) { var temp = ''; data.forEach(element => { var item = ` <div class="card col-xs-12 col-lg-4 my-2"> <div class="card-body"> <figure> <img src=${element.image_url} class="img-fluid" alt=${element.name}></figure> <article class="ms-3"> <h5 class="card-title">${element.name}</h5> <p class="card-text">${element.description.length > 220 ? element.description.substring(0, 220) + '...' : element.description}</p> </article> <!--- This is what's suppose to give the event on click. ---> <a href="javascript:void(0)" id=${element.id}> <i class="fa fa-star-o usericon mt-3"></i></a> </div> </div>` temp += item; }); return temp; } //this is what's not working $('.card a').click(function () { var usersid = $(this).attr("id"); favouritesList.push(usersid); console.log(favouritesList); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script> <section class="my-3 g-0" id="dynamicData"> </section>Por favor, guía si es posible. Gracias.
Su código no funciona porque su elemento no está cargado con la página, por lo que cuando jQuery ejecuta $('.card a').click(function... , $('.card a') devuelve nulo, por lo que el el oyente no está conectado.
Agregue su oyente al documento así:
$(document).on("click", ".card a", function() { ... }) Cuando el usuario hace clic en el documento, jQuery verificará si $(".card a") es el destino, incluso si se agregó después de que la página se cargó inicialmente, y ejecutará su función si lo es.
Como @will ya señaló: es un problema de tiempo. En su código, el evento de clic se adjuntó antes de que llegue el contenido de su $.getJSON() . Mediante el uso de un archivo adjunto de evento delegado puede resolver el problema:
const page=1, dataList=[], favouritesList=[]; $.getJSON('https://api.punkapi.com/v2/beers?page=' + page + '&per_page=25', function (beerList) { // console.log(beerList) dataList.push(beerList); currentElements = renderFuntion(beerList); $('#dynamicData').html(currentElements); }); function renderFuntion(data) { var temp = ''; data.forEach(element => { var item = ` <div class="card col-xs-12 col-lg-4 my-2"> <div class="card-body"> <figure> <img src=${element.image_url} class="img-fluid" alt=${element.name}></figure> <article class="ms-3"> <h5 class="card-title">${element.name}</h5> <p class="card-text">${element.description.length > 220 ? element.description.substring(0, 220) + '...' : element.description}</p> </article> <!--- This is what's suppose to give the event on click. ---> <a href="javascript:void(0)" id=${element.id}> <i class="fa fa-star-o usericon mt-3">click me</i></a> </div> </div>` temp += item; }); return temp; } //this is now working: $('section').on("click",".card a",function () { favouritesList.push($(this).attr("id")); console.log(favouritesList); }); .img-fluid {height:80px} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script> <section class="my-3 g-0" id="dynamicData"> </section>ajaxComplete también resuelve tu problema.
$(document).ajaxComplete(function () { $('.card a').click(function () { const favouritesList = []; let usersId = $(this).attr("id"); favouritesList.push(usersId); console.log(favouritesList); }) })