js动态添加的html绑定事件

Posted 2021-01-05 凉面好好吃

使用场景：网站上ul里面的li数据需要从后台数据查询出来即通过js添加数据。然后监听点击li点击事件。

添加数据代码：

        for(var i = 0; i < table.length; i++) {
            if(i === 0) {
                beforid = "role" + i;
                allrolestr += "<li class="roleli" onclick="getroleclick(this)" style="color:red;text-align:center;border-bottom:1px solid #ccc;padding-bottom: 10px;padding-top:5px;" id="role" + i + "" style="cursor:pointer;padding:10px;padding-left:17px;border-bottom:1px solid #ccc;">" + table[i]["角色"] + "</li>";
            } else {
                allrolestr += "<li class="roleli" onclick="getroleclick(this)" id="role" + i + "" style="cursor:pointer;padding:10px;padding-left:17px;border-bottom:1px solid #ccc;">" + table[i]["角色"] + "</li>";
            }
        }
        $(".roleul").html(allrolestr);

事件处理：

function getroleclick(e) {
    //alert($(e).text());//获取点击项
    rolename = $(e).text();
    $(e).get(0).style.color="red";
    getsiteName(rolename);
}