动态数据如何通过jQuery触发锚点标签点击事件

Question

试图用jQuery触发a标记的点击事件，但该事件与$.getJSON在section中设置的数据链接

以下是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>

如果可能的话，请做导游。谢谢

Answer 1

您的代码无法工作，因为您的元素没有与页面一起加载，所以当jQuery运行$('.card a').click(function...时，$('.card a')返回null，因此侦听器没有附加。

将您的听众添加到文档中，如下所示：

$(document).on("click", ".card a", function() { ... })

当用户点击文档时，jQuery将检查$(".card a")是否是目标，即使是在页面最初加载后添加的，如果是，jQuery也会执行您的功能。

Answer 2

ajaxComplete也可以解决您的问题。

$(document).ajaxComplete(function () {
$('.card a').click(function () {
const favouritesList = [];
let usersId = $(this).attr("id");
favouritesList.push(usersId);
console.log(favouritesList);
})
})

Answer 3

正如@已经指出的：这是一个时间问题。在您的代码中，点击事件是在$.getJSON()的内容到达之前附加的。通过使用委托事件附件，您可以解决以下问题：

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>

Answer 4

要通过点击事件访问动态元素，必须使用类似于$(document).on('click','elementName',function(){})的东西

我做了一些小改动，希望它们就是你想要的。编码快乐！

var favouritesList = [];
const page=1, dataList=[];
$.getJSON('https://api.punkapi.com/v2/beers?page=' + page + '&per_page=25', function (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> User Icon</a>
</div>
</div>`
temp += item;
});
return temp;
}
//I've changed the way you are trying to get that ID from the anchor tag
$(document).on('click','a',function () {
var usersid = $(this).attr("id");
favouritesList.push(usersid);
console.log(favouritesList);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="my-3 g-0" id="dynamicData">
</section>