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');})}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/568275.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Jmeter JDBC Request执行多条SQL语句

之前写过Jmeter操作mysql的文章https://blog.csdn.net/qq_36502272/article/details/88891873今天我们再看下如何操作多条sql语句 1、添加JDBC Connection Configuration并配置 Database URL为MySQL的连接串&#xff0c;如果要执行多条SQL语句&#xff0c;后面还要添加“?al…

Python使用HMACSHA1加密生成签名

按key升序&#xff0c;key不为sign&#xff0c;value不为空&#xff0c;再把key和value拼装成xa&yb格式&#xff0c;然后使用HmacSHA1算法生成签名 import json,hashlib,hmac,base64def sign(data):date_newfor key,value in sorted(data.items()):if key!"sign"…

sql常见语句记录

1、查询sql中数据不为空并且不为null SELECT * FROM 表名 WHERE 字段名 IS NOT NULL AND 字段名 <> ; # ‘’表示为空

Pyhon列表排序(升序和降序)

一、sort()方法&#xff1a; list.sort(cmpNone, keyNone, reverseFalse) cmp -- 可选参数, 如果指定了该参数会使用该参数的方法进行排序。 key -- 主要是用来进行比较的元素&#xff0c;只有一个参数&#xff0c;具体的函数的参数就是取自于可迭代对象中&#xff0c;指定可迭…

mysql deadlock found when trying to get lock暴力解决

如若你在运行代码时出现此问题&#xff0c;那么此博客可以略过了。 如若你也不知道怎么操作后&#xff0c;突然对表进行增删查改的操作后&#xff0c;出现此问题&#xff0c;那么采用暴力解决法 方案一&#xff1a; 1、查询是否锁表 show OPEN TABLES where In_use >0; …

Pytest Hooks方法之pytest_runtest_makereport获取测试用例结果

pytest提供的钩子(Hooks)方法之pytest_runtest_makereport&#xff0c;可以更清晰的了解用例的执行过程&#xff0c;并获取到每个用例的执行结果。 一、Hook 方法之 pytest_runtest_makereport源码&#xff1a; hookspec(firstresultTrue) def pytest_runtest_makereport(ite…

服务端和客户端测试连通ip设置记录

若服务器和客户端在同一台电脑&#xff0c;即为本机测试&#xff0c;则测试都用127.0.0.1 若是服务器和客户端在两台电脑&#xff0c;则需要在同一局域网内&#xff0c;并且ip地址填写本机ip。 若是发布在云端测试&#xff0c;则服务端地址为0.0.0.0&#xff1b;客户端地址填…

Pytest Hooks方法之pytest_collection_modifyitems改变测试用例执行顺序

pytest默认执行用例顺序是根据项目下文件名称按ascii码去收集运行的&#xff0c;文件里的用例是从上往下按顺序执行的. pytest_collection_modifyitems 这个函数顾名思义就是收集测试用例、改变用例的执行顺序的。 一、pytest_collection_modifyitems 是测试用例收集完成后&am…

MySQL 8.0开始Group by不再排序

如题所示&#xff0c;mysql 8.0 开始 group by 默认是没有排序的 那mysql 8.0 之前和 8.0 就有可能结果出现不同 需要警惕 查看版本信息 rootmysql3306.sock>[employees]>show variables like %version%; ------------------------------------------------------- | V…

Python操作Jira提交BUG

Jira提供了完善的RESTful API&#xff0c;如果不想直接请求API接口可以使用Python的Jira库来操作Jira jira Python文档https://jira.readthedocs.io/en/latest/ 安装&#xff1a;pip install jira 认证&#xff1a;Jira的访问是有权限的&#xff0c;在访问Jira项目时首先要进…

mysql 导入导出大文件

mysql导入&#xff1a; load data local infile C:/Users/Administrator.USER-20190225BY/Desktop/test.csv into table test fields terminated by\t lines terminated by\n ignore 1 lines (xianlu,chepai,shijian,jing,wei) mysql导出&#xff1a; select * from mysql.te…

Pytest之pytest.assume用例中断言1失败会继续执行后续代码断言2

一般我们做自动化测试时&#xff0c;一个用例会写多个断言&#xff0c;当第一个断言失败后&#xff0c;后面的代码就不会执行了&#xff0c;于是我们引进了pytest-assume插件可以解决断言失败后继续断言的问题。 一、安装依赖包 pip install pytest-assume 二、使用assert进…

Unable to round-trip http request to upstream错误

这几天打开浏览器经常出现Unable to round-trip http request to upstream。提示。 一直以为是网速的问题。今天百度才发现是因为打开了蓝灯。赶紧关掉蓝灯即可

Pytest之pytest-assume同用例多断言,断言1失败会执行后续代码及断言2

一般我们做自动化测试时&#xff0c;一个用例会写多个断言&#xff0c;当第一个断言失败后&#xff0c;后面的代码就不会执行了&#xff0c;于是我们引进了pytest-assume插件可以解决断言失败后继续断言的问题。一、安装依赖包pip install pytest-assume二、使用assert进行断言…

无法打开包括文件: “corecrt.h”: No such file or directory

刚开始安装qt&#xff0c;测试是否安装成功就出现此问题&#xff0c;让人很头大 参考&#xff1a;https://blog.csdn.net/x356982611/article/details/51140807的播客 编译时候使用的是最新的sdk版本10.0.10586.0版本但是它里面没有ucrt目录&#xff0c;问题找到了。 看了下v…

Pytest-ordering自定义用例执行顺序

我们一般在做自动化测试时&#xff0c;用例设计之间应该是可以相互独立执行的&#xff0c;没有一定的前后依赖关系的&#xff0c;如果我们真的有前后依赖&#xff0c;想指定用例的先后顺序&#xff0c;可以用到pytest-ordering插件解决这个问题 1、安装依赖包 pip install pyt…

LNK2019无法解析的外部符号 public: static struct cv::Ptr class cv::xfeatures2d::SURF问题解决

原因是lib文件没有引入 opencv_xfeatures2d320d.lib opencv_features2d320d.lib 在配置opencv时&#xff0c;应把D:\Program Files (x86)\opencv3\opencv\build\x64\vc14\lib下所有的lib文件都添加到链接器的输入中 也有可能是你下载的opencv库中没有这个lib&#xff0c;而你…

Pytest参数选项在脚本中和命令行用法详解

运行pytest可以指定目录和文件&#xff0c;如果不指定&#xff0c;pytest会搜索当前目录及其子目录中以test_开头或以_test结尾得测试函数。我们把pytest搜索测试文件和测试用例的过程称为测试搜索&#xff08;test discovery&#xff09;。只要遵循pytest的命名规则&#xff0…

Win7下OpenCV3.2.0+VS2015配置

参考自&#xff1a;https://blog.csdn.net/qq_22812319/article/details/78335880 一、预备知识 1、下载opencv时&#xff0c;opencv与vs版本是有固定关系的。 2、vs一般使用release版本。 3、首先在下载的openCV解压目录opencv/build/x64/下查看文件夹名&#xff0c;如下图…

Pytest标记预期失败得测试用例@pytest.mark.xfail()

pytest除了测试函数中使用这个方法pytest.xfail()外&#xff0c;xfail还有一种使用方法。就是pytest.mark.xfail()标记预期会失败的用例&#xff0c;即期望测试用例是失败的&#xff0c;但是不会影响测试用例的的执行。 标记的用例运行后&#xff0c;断言失败&#xff0c;所以…