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

时间:2018-02-14 06:44:57

标签: javascript function dynamic inline elements

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

0 个答案:

没有答案