js 给动态li添加动态点击事件

一、给动态li添加动态点击事件

试了网上的on,live,bind绑定，都不起作用。最后看到https://bbs.csdn.net/topics/390414057

上的代码。试了一遍，demo ok。

附上demo：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function() {var ul = $("ul");$(document).on("click", "li.new", function() {alert($(this).text());});$("#addLi").click(function() {ul.append("<li class=\"new\">"+(ul.children("li").size()+1+"li")+"</li>");});});</script>
</head>
<body><ul id="ul"><li class="new">1</li><li class="new">2li</li><li class="new">3li</li></ul><input type="button" value="click" id="addLi" />
</body>
</html>

我的实践代码：

HTML代码：

<div class="infoShow" style="margin-top:5px;"><ul id="info"></ul></div>

js代码：


$("#info").append("<li class=\"new\" >"+info_scroll+"</li>");$(document).on("click","li.new",function(){console.log("异常信息查询");$.ajax({url:'/getEventDataById/',type:'post',data:{"appcontent":appcontent}}).done(function(data){ShowDiv('MyDiv','fade');document.getElementById('info_projectname').innerText=data.project_info[0];document.getElementById('info_taskname').innerText=data.project_info[1];document.getElementById('info_cameraid').innerText=data.project_info[2];document.getElementById('info_tempValue').innerText=data.project_info[3];document.getElementById('info_tempRect').innerText=data.project_info[4];document.getElementById('info_image_temp01').src=data.imageTempFilename_0;document.getElementById('info_image_temp02').src=data.imageTempFilename_1;document.getElementById('info_image_exception').src=data.exception_imagepath;})})

二、为动态li绑定不同的事件（获取当前li的index值，然后绑定事件）

我的实践：

 var ul=$("#info");
ul.append("<li id=\""+appcontent+"\"+ class=\"neww\" >"+info_scroll+"</li>");var lis=$('#info li');for(var i=0;i<lis.length;i++){lis[i].onclick=function(){idd=this.id;  //获取此li下的idli_class=this.className;  //获取此li下的classnameconsole.log(idd);$.ajax({url:'/getEventDataById1/',type:'post',data:{"appcontent":idd}}).done(function(data){console.log("info_image_exception:"+data.exception_imagepath);ShowDiv('MyDiv','fade');})}

js 给动态li添加动态点击事件相关推荐

ajax点击事件无法触发,解决jQuery Ajax动态新增节点无法触发点击事件的问题_婳祎_前端开发者...
在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写οnclick="" ...
html 点击增加样式,js点击添加css样式 css添加jq点击事件 JavaScript点击增加css样式...
js可实现点击后对div或者其他标签增加或者删除css样式,从而达到实现点击触发某种效果的目的.页面样式可以通过style修饰,也可以通过css修饰,改变css或者添加css可以改变页面的排版.代码如 ...
js 原生方法 -- 模拟浏览器的点击事件
js 原生方法 – 模拟浏览器的点击事件 1. 创建自定事件并监听可看看 MDN 的 Evnet, CustomEvent 对象 <!DOCTYPE html> <html la ...
动态添加表格点击事件
div部分 <table class="layui-table"><thead><tr><th>模块</th><t ...
jquery 动态拼接数据设置点击事件
//获取总数据 $.ajax({type: "post", //请求方式contentType: "application/json",url:"&q ...
java添加按钮点击事件_如何为odoo 10中的按钮点击事件添加一个java脚本处理程序？...
我想使用java脚本为header中的按钮创建一个处理程序.下面我视图模型给出:如何为odoo 10中的按钮点击事件添加一个java脚本处理程序? inherit_id="web.asset ...
按钮button，submit添加鼠标点击事件
目录 1.直接在按钮处添加onclick属性 2.在表单处添加onsubmit属性 3.操控DOM元素获得组件元素并监听 4.利用jQuery去获得组件元素,使用封装好的click()方法 ...
WebView 实现JS效果和a标签的点击事件
2019独角兽企业重金招聘Python工程师标准>>> 目前很多android app都可以显示web页面的界面,嵌入式开发,这个界面一般都是WebView这个控件加载出来的,学习该 ...
Android 高级UI设计笔记20：RecyclerView 的详解之RecyclerView添加Item点击事件
1. 引言: RecyclerView侧重的是布局的灵活性,虽说可以替代ListView但是连基本的点击事件都没有,这篇文章就来详细讲解如何为RecyclerView的item添加点击事件,顺便复习一 ...

js 给动态li添加动态点击事件

一、给动态li添加动态点击事件

二、为动态li绑定不同的事件（获取当前li的index值，然后绑定事件）

js 给动态li添加动态点击事件相关推荐

最新文章

热门文章