我有一个单词列表,每个单词都附有一个星形图标(用于标记该项目)。对于星号,附加了内联onClick
函数。所有这些项目都是动态生成的,如下所示:
$('#bookmarks').append("<ul>"+"<p><strong>"+(key.replace(/\//g, ' / ')).replace(/\_/g, ' ')+"</strong></p>");
for (var dd in obj[key])
{
var fname= key+"/"+obj[key][dd];
if(!((String(obj[key][dd]).toLowerCase()).indexOf("README.md".toLowerCase()) != -1)) {
if(!favs.includes(fname)) {
current_fname = favs[fname];
$('#bookmarks').append("<li><a target='_blank' href='/code/"+key+"/"+obj[key][dd]+"'>"+""+obj[key][dd]+" </a>" + "<i onclick=updateFavs(this,\'"+favs[fname] +"\') class='fa fa-star'></i><br></li>");
} else {
$('#bookmarks').append("<li><a target='_blank' href='/code/"+key+"/"+obj[key][dd]+"'>"+""+obj[key][dd]+" </a>" + "<i onclick=updateFavs(this,\'"+favs[fname] +"\') class='fa fa-star checked'></i><br></li>");
}
}
}
$('#bookmarks').append("</ul>");
现在,不允许在Chrome中使用内联函数。
所以,当我像id='myStar'
这样的星号附加一个id时:
if(!favs.includes(fname)) {
current_fname = favs[fname];
$('#bookmarks').append("<li><a target='_blank' href='/code/"+key+"/"+obj[key][dd]+"'>"+""+obj[key][dd]+" </a>" + "<i id='myStar"+favs[fname]+ "' class='fa fa-star'></i><br></li>");
} else {
$('#bookmarks').append("<li><a target='_blank' href='/code/"+key+"/"+obj[key][dd]+"'>"+""+obj[key][dd]+" </a>" + "<i id='myStar"+favs[fname]+ "' class='fa fa-star checked'></i><br></li>");
}
并关联onClick
函数,如下所示:
$("#bookmarks").on("click", "myStar", function () {
console.log("You clicked the button");
});
onClick
函数被调用的次数与列表中的单词一样多,并且与列表中的所有星相关联,而不是与当前星相关联。在这种情况下我该怎么办?