Question

我有一个单词列表，每个单词都附有一个星形图标（用于标记该项目）。对于星号，附加了内联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]+"&nbsp;&nbsp;</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]+"&nbsp;&nbsp;</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]+"&nbsp;&nbsp;</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]+"&nbsp;&nbsp;</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函数被调用的次数与列表中的单词一样多，并且与列表中的所有星相关联，而不是与当前星相关联。在这种情况下我该怎么办？

将onClick函数与列表中动态创建的元素相关联

0 个答案: