如何通过JS动态给li标签添加点击事件并跳转

如何给li标签添加点击事件

一、HTML demo代码
二、JS动态新增li并绑定点击事件
三、效果图

有很长一段时间没写博客了，最近做了一个类似于榜单的小需求，遇到了一些小问题，姑且简单的记录一下吧。

注：用的vue，手动绘制了个简单的demo，非专业前端制作界面比较简陋，哈哈。

一、HTML demo代码

<div class="box decoration" style=" margin:0 auto"><h1 style="text-align: center;" >浏览榜单</h1><ul  id="top_panel" style="margin:0 auto">//动态增加需要的li</ul>
</div>

二、JS动态新增li并绑定点击事件

 drawPanel: function (data){$("#top_panel").empty();var mainPanel = document.getElementById("top_panel");for(var i=0; i<data.length; i++){var childDiv = document.createElement("li");childDiv.style.marginLeft = "-28px";childDiv.id = data[i].detoxificationCaseId;childDiv.innerHTML = '<span>'+((this.pageNo-1)*6+i+1)+'</span>'+data[i].caseName+'<strong class="view_count">'+data[i].viewTimes+'  浏览量</strong>';mainPanel.appendChild(childDiv);childDiv.onclick = function (  ) {//获取添加的li标签的元素值alert("当前点击记录id："+this.id);// window.location.href= "detoxificationDetail.html?detoxificationCaseId=" +this.id ;}}
}

注：点击事件是在点击之后才触发绑定，之前博主发现直接在childDiv.onclick = function ( ) {}中直接将参数绑定对应ID，但是到点击的时候默认携带的id还是列表最终的参数。所以就曲线救国，把id直接设置成了li的模块id，在点击的时候获取本身的id，这样就不会造成错乱了。

三、效果图

仅作记录，个人开发所遇所解，希望对你有帮助！如有错误还望指正，谢谢！一只不断前进的全栈码畜！

如何通过JS动态给li标签添加点击事件并跳转相关推荐

js为li列表添加点击事件
今天看到一个面试题目 //html代码 <body><ul><li>1</li><li>2</li><li>3< ...
WebView 实现JS效果和a标签的点击事件
2019独角兽企业重金招聘Python工程师标准>>> 目前很多android app都可以显示web页面的界面,嵌入式开发,这个界面一般都是WebView这个控件加载出来的,学习该 ...
解决给a标签添加点击事件时遇到的问题
前几天有人问我为什么她的点击事件不好使呢?效果闪一下就没有了? 首先她的点击事件没有加给button或者其他标签,当然a标签是可以加的,但是一般a标签我们都是用来链接到某个网页或位置,它的href属性 ...
给动态生成的id标签添加html,vue动态渲染svg、添加点击事件
欢迎关注[前端小讴的github],原创技术文章业务需求(vue项目中) 1.页面展示svg内容 2.监听svg内部的点击事件 3.动态改变svg内部元素的属性和值 html标签经多次实验,用em ...
前端| js动态修改video标签视频不刷新的问题
问题描述:在网页上用<video>标签放一个视频播放器,点击视频目录来自动播放不同的视频.通过js动态生成li,点击li之后更改<video>标签<source>中 ...
给li标签添加自定义属性
给li标签添加属性<ul> <li></li> <li></li> <li></li> <li>< ...
Android 动态添加标签及其点击事件
在做Android开发的时候,会遇到动态添加标签让用户选择的功能,所以自己写了个例子,运行效果图如下. 标签可以左右滑动进行选择,点击的时候,会弹出toast提示选择或者取消选择了哪个标签.通过动态添 ...
css里面li标签怎么加图片_分享三种给li标签添加图标的方法
我们在页面布局时,经常会用到li标签,单独使用li标签比较单调,有时候为了页面效果,需要加入图片,那怎么在li标签中添加图片呢?这篇文章就和大家分享三种给li标签添加图标的方法,希望对你有用. 1.使 ...
动态创建表格给同一个标签创建点击事件并让点击事件操作内容不一样
动态创建表格给同一个标签创建点击事件,每个点击事件操作的元素不一样. 现在有这样的需求,点击"查看详细"显示或隐藏标签.要实现这样的效果就要给点击标签添加两个属性,一个属性是nam ...

如何通过JS动态给li标签添加点击事件并跳转

如何给li标签添加点击事件

一、HTML demo代码

二、JS动态新增li并绑定点击事件

三、效果图

如何通过JS动态给li标签添加点击事件并跳转相关推荐

最新文章

热门文章