为动态添加的元素绑定点击事件以及传参（参数有空格处理）

本文链接：https://blog.csdn.net/m0_46495397/article/details/107415957

本文介绍了一种在JavaScript中为动态生成的元素绑定点击事件的方法，通过遍历数据集，根据条件显示不同状态的图片，并为其绑定点击事件，同时传递包含主机ID、IP地址、端口和主机名等参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为动态添加的元素绑定点击事件

1.获取数据，添加图片，并且帮绑定点击事件。
传递多个参数的格式//οnclick=info(’"+hostId+"’,’"+ip+"’,’"+port+"’,’"+escape(hostName)+"’)

```javascript

//html代码
<div id="index"></div>
//js代码
//循环取到的数据，根据要求显示相应的图片，为图片绑定点击事件，并且传递参数，参数中有空格导致不能执行方法，可以加入escape将空格转换。
 for (var i = 0; i <res.data.length; i++) {
                    hostId=res.data[i].hostId;
                    ip=res.data[i].ip;
                    port=res.data[i].port;
                    hostName=res.data[i].hostName;
                    if(res.data[i].hostuse==1){
                        use="使用中";
                        imge="static/images/serveunnormal.png"
                    }else{use="未使用";
                        imge="static/images/servenomal.png"
                    }
                    // margin-bottom:30px;margin-right:95px; border: 1px solid black
                    disindex += "<div class='layui-inline link'  style='width: 250px;height: 230px;'>   <div style='width: 105px;height: 107px;margin:0 auto;' id='" + res.data[i].hostName + "'><img  src='"+imge+"'  onclick=info('"+hostId+"','"+ip+"','"+port+"','"+escape(hostName)+"') /></div> "
                    disindex += "<p style='text-align:left; font-size:12px;  padding-left:50px;padding-top:10px'>主机状态："+use+"</p>";
                    disindex += "<p style='text-align:left; font-size:12px; padding-left:50px; padding-top:10px'>主机名称："+res.data[i].hostName+"</p>";<!--   -->
                    disindex += "<p style='text-align:left;font-size:12px; padding-left:50px;padding-top:10px'>主机IP："+res.data[i].ip+"</p>";
                    disindex += "<p style='text-align:left; font-size:12px; padding-left:50px; padding-top:10px'>主机组名称："+res.data[i].hostGroupName+"</p>";
                    disindex += "</div>";
                }
                $("#index").html(disindex)
                function info(a,b,c,d){
                //使用相应的参数
                }