#javascript #html #jquery
#язык JavaScript #HTML #jquery
Вопрос:
Я добавляю элемент списка с помощью функции добавления в jQuery, как я могу ссылаться на это в своей функции onclick? Ниже приведен мой код
$(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('lt;li id="list"gt;lt;a href=""gt;' movie.name 'lt;/agt;lt;/ligt;') }) } }) }); $('#list').on('click', 'a', function(event) { console.log('here'); }); lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"gt;lt;/scriptgt; lt;h1 id='bruh'gt;TV Showslt;/h1gt; lt;ul id="showList"gt;lt;/ulgt; lt;div id="show"gt;lt;/divgt; lt;form id="searchForm"gt; lt;input type="text" id="search_term"gt; lt;label for="text"gt;Searchlt;/labelgt; lt;buttongt;Submitlt;/buttongt; lt;/formgt; lt;a id="homelink" href="#" hiddengt;Back to All Showslt;/agt; Когда я нажимаю на ссылку, в консоли нет сообщения.
Комментарии:
1. Похоже, у вас их будет много
lt;li id="list"gt;— идентификатор должен быть уникальным для каждого из них.2.На каждой странице может быть только одна
id. Прямо сейчас все ваши списки имеют один и тот же идентификатор:list.
Ответ №1:
Идентификатор атрибута должен быть уникальным в документе, вместо этого вы можете использовать класс.
Попробуй $('body').on('click', '.list a', function(event){... .
ДЕМОНСТРАЦИЯ:
$(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('lt;li class="list"gt;lt;a href=""gt;' movie.name 'lt;/agt;lt;/ligt;') }) } }) }); $('body').on('click', '.list a', function(event) { console.log('here'); event.preventDefault();//stay on the same page }); lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"gt;lt;/scriptgt; lt;h1 id='bruh'gt;TV Showslt;/h1gt; lt;ul id="showList"gt;lt;/ulgt; lt;div id="show"gt;lt;/divgt; lt;form id="searchForm"gt; lt;input type="text" id="search_term"gt; lt;label for="text"gt;Searchlt;/labelgt; lt;buttongt;Submitlt;/buttongt; lt;/formgt; lt;a id="homelink" href="#" hiddengt;Back to All Showslt;/agt; Ответ №2:
Вы можете дать добавленным дивам класс, а затем назвать их по нему следующим образом :
$movies.append('lt;li class="movie" id="list"gt;lt;a href=""gt;' movie.name 'lt;/agt;lt;/ligt;'); //then later let movies = $('.movie'); console.log(movies); но если вы намеревались выполнить этот сценарий сразу после запроса ajax , вам следует вызвать функцию в успешном выполнении ajax, так как ajax асинхронен, и в момент, когда вы выполняете выбор jquery, элементов все еще нет, потому что ajax требует больше времени для извлечения данных, помещенных в документ… вы можете сделать getMovies (), чтобы выполнить там вот так:
//объявите это за пределами ajax
let movies = [] function getMovies(){ return $('.movie'); } затем
//ajax success: function(){ movies = getMovies(); //add this line } вот и все, теперь у вас есть фильмы, хранящиеся в массиве «фильмы».
Ответ №3:
Похоже, вы впадаете в своего рода гоночное состояние. Вы создаете список с помощью асинхронного ajax — запроса к API. Прежде чем это завершится, вы затем прикрепляете код Javascript для запуска события.
Что вам нужно сделать, так это добавить обратный вызов внутри ready блока после извлечения данных списка и создания списка.
Комментарии:
1. Они используют делегирование событий, так что все должно быть в порядке — однако вы правы в том, что код делегирования должен происходить в
$(document).ready...2. Да, спасибо. Это моя точка зрения @Kinglish