文档章节

jQuery.ajax动态添加标签无法被获取到

bithup
 bithup
发布于 2017/05/02 11:39
字数 191
阅读 93
收藏 1

问题:在ajax中获取数据后为页面动态添加<li>标签,点击<li>标签时,无法执行jQuery的onClick方法

原因:添加<li>标签的方法在ajax方法内部,而jQuery的onClick方法在ajax方法的外部。

 

解决办法:将添加<li>标签的方法和onClick方法同时放在ajax的内部或外部

$.ajax({
    url:"/",
    type:"POST",
    dataType:"json",
    success:function(data){
		var resultData = data;
		/*遍历预定信息*/
		var venueInfo="";
		$.each(resultData.resultData.venueList,function (i,item) {
			venueInfo+="<ul class='swiper-slide'> <li class='site_num'>"+item.venue_no+"号场</li>";
            for(var i=startTime;i<=endTime;i++){
                if(i==10){
                    venueInfo+="<li class='fulled'></li>";
                    $(".fulled").attr("disabled","disabled");
                }else{
                    venueInfo+="<li></li>";
                }
            }
            venueInfo+="</ul>";
        });
        $("#venueInfo").html(venueInfo);
		/*在ajax内部为li标签绑定click事件*/
        $(".right_wrap ul li").on("click",function(){
			$(this).toggleClass("seled");
        });
    }
});

 

© 著作权归作者所有

共有 人打赏支持
上一篇: js页面动态效果
下一篇: Java处理JSON
bithup
粉丝 8
博文 101
码字总数 82172
作品 0
西城
程序员
私信 提问
关于angulerjs的八种技巧

第一 迭代输出之ng-repeat标签 ng-repeat让table ul ol等标签和js里的数组完美结合 你甚至可以指定输出的顺序: 第二 动态绑定之ng-model标签 任何有用户输入,只要是有值的html标签,都可以...

a69694510
2017/06/28
0
0
JS跨域交互(jQuery+php)之jsonp使用心得

JSON是一种基于文本的数据交换方式,或者叫做数据描述格式,这篇文章主要介绍了JS跨域交互(jQuery+php)之jsonp使用心得的相关资料,非常不错,具有参考借鉴价值,需要的朋友一起学习吧 什么是...

mickelfeng
2016/12/19
15
0
SpringMVC+Jquery+Ajax跨域请求获取数据

jsonp解释 下面就直接上代码了~~~ 前端js文件内容 `/** 脚本 / var page = { /* * 页面数据 /data:{ }, /* * 事件 /event:{ /* * 初始化事件 */initEvent:{ init:function(){var url = page...

青竹风
2016/10/21
33
0
04-老马jQuery教程-DOM节点操作及位置和大小

1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签。创建标签后,动态的给他添加属性。例如代码: 1.2 jQuery动态创建标签的方式 jQ...

aicoder
2017/12/05
0
0
JavaScript多种跨域方式

JSONP方式 这种方法即引入不同源的脚本,该脚本载入后会调用全局的某个方法的,所以只要本页面提供该方法给它调用即可,从而达到跨域的目的。具体应用有jQuery.ajax的jsonp调用,也有script标...

前端届的科比
2015/09/05
77
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring异常之Druid – unregister mbean error

Spring异常之Druid – unregister mbean error 2017年04月19日 12:13:42 Dr.Zhu 阅读数:6688 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zt_fucker/arti...

linjin200
15分钟前
1
0
微信小程序webview问题

今天在改小程序的时候在使用webview的时候切换webview的地址行为,出现了诡异的情况。 默认querystring里会有多个?符号,使用的时候被微信给截取了,导致程序找不到改页面。 而且querystri...

钟元OSS
18分钟前
1
0
Spark2.0操作Hbase

读写Hbase的方法,这里是通过Spark的RDD来操作的方法,通过Hbase API的方式是另一种,这里不涉及。 首先配置pom,添加hbase依赖,一般Spark平台不包含hbase的jar包,所以这些依赖不添加<scop...

守望者之父
19分钟前
1
0
【转】你会用哪些JavaScript循环遍历

总结JavaScript中的循环遍历定义一个数组和对象 const arr = ['a', 'b', 'c', 'd', 'e', 'f'];const obj = {a: 1,b: 2,c: 3,d: 4} for() 经常用来遍历数组元素 遍历值为数组元素...

kaixin_code
22分钟前
1
0
mysql的锁

MySQL的锁 全局锁:对数据库实例加锁 MySQL提供了一个加全局读锁的方法:Flush tables with read lock(FTWRL) 使用场景:做全库逻辑备份。 官方自带的逻辑备份工具mysqldump,使用时带上参数...

灯下草虫鸣_
25分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部