我正在使用 jQuery 中的 append 函式添加一個串列元素，如何在我的 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('<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>當我單擊鏈接時，控制臺中沒有訊息。
uj5u.com熱心網友回復：
屬性id在檔案中應該是唯一的，您可以使用class代替。
試試$('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('<li ><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>uj5u.com熱心網友回復：
您似乎遇到了某種競爭條件。您正在使用對 API 的異步 ajax 請求來構建串列。在此完成之前，您將附加 Javascript 代碼以觸發事件。
您需要做的是在ajax塊中創建串列后添加回呼。
uj5u.com熱心網友回復：
你可以給附加的 div 一個類，然后像這樣呼叫它們：
$movies.append('<li class="movie" id="list"><a href="">' movie.name '</a></li>');
//then later
let movies = $('.movie');
console.log(movies);
但是如果您打算在 ajax 請求之后立即執行此腳本，那么您應該在 ajax 成功中呼叫一個函式，因為 ajax 是異步的，并且當您執行 jquery select 時，元素仍然不存在，因為 ajax 需要更多時間來檢索資料把它放在檔案中......你可以像這樣制作一個 getMovies() 在那里執行：
//在ajax之外宣告
let movies = []
function getMovies(){
return $('.movie');
}
然后
//ajax
success: function(){
movies = getMovies(); //add this line
}
好了，現在你已經在“電影”陣列中存放了電影
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/372151.html
標籤：javascript html 查询
上一篇：jQuery按鈕未顯示下一個問題