Estoy agregando un elemento de lista usando la función de agregar en jQuery, ¿cómo hago referencia a esto en mi función onclick? A continuación se muestra mi código
$(function() { let $movies = $('#showList') let $m = $('#show') $.ajax({ method: 'GET', url: 'http://api.tvmaze.com/shows', success: function(movies) { $.each(movies, function(i, movie) { $movies.append('<li id="list"><a href="">' + movie.name + '</a></li>') }) } }) }); $('#list').on('click', 'a', function(event) { console.log('here'); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <h1 id='bruh'>TV Shows</h1> <ul id="showList"></ul> <div id="show"></div> <form id="searchForm"> <input type="text" id="search_term"> <label for="text">Search</label> <button>Submit</button> </form> <a id="homelink" href="#" hidden>Back to All Shows</a>No hay ningún mensaje en la consola cuando hago clic en el enlace.
Puede dar a los divs adjuntos una clase y luego llamarlos así:
$movies.append('<li class="movie" id="list"><a href="">'+ movie.name +'</a></li>'); //then later let movies = $('.movie'); console.log(movies);pero si tenía la intención de ejecutar este script justo después de la solicitud de ajax, entonces debe llamar a una función en el éxito de ajax ya que ajax es asíncrono y en el momento en que ejecuta una selección de jquery, los elementos aún no están allí porque ajax toma más tiempo para recuperar el data ponlo en el documento... puedes hacer un getMovies() para ejecutar allí de esta manera:
//declarar esto fuera del ajax
let movies = [] function getMovies(){ return $('.movie'); }después
//ajax success: function(){ movies = getMovies(); //add this line }ahí tienes, ahora tienes películas almacenadas dentro de la matriz de 'películas'
Parece que te encuentras en una especie de condición de carrera. Está creando la lista mediante una solicitud ajax asíncrona a una API. Antes de que se complete, está adjuntando el código Javascript para activar un evento.
Lo que debe hacer es agregar la devolución de llamada dentro del bloque ready después de recuperar los datos de la lista y crear la lista.
La identificación del atributo debe ser única en un documento, puede usar la clase en su lugar.
Prueba $('body').on('click', '.list a', function(event){... .
Manifestación:
$(function() { let $movies = $('#showList') let $m = $('#show') $.ajax({ method: 'GET', url: 'http://api.tvmaze.com/shows', success: function(movies) { $.each(movies, function(i, movie) { $movies.append('<li class="list"><a href="">' + movie.name + '</a></li>') }) } }) }); $('body').on('click', '.list a', function(event) { console.log('here'); event.preventDefault();//stay on the same page }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <h1 id='bruh'>TV Shows</h1> <ul id="showList"></ul> <div id="show"></div> <form id="searchForm"> <input type="text" id="search_term"> <label for="text">Search</label> <button>Submit</button> </form> <a id="homelink" href="#" hidden>Back to All Shows</a>