文档章节

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

bithup
 bithup
发布于 2017/05/02 11:39
字数 191
阅读 87
收藏 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");
        });
    }
});

 

© 著作权归作者所有

共有 人打赏支持
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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JS:异步 - 面试惨案

为什么会写这篇文章,很明显不符合我的性格的东西,原因是前段时间参与了一个面试,对于很多程序员来说,面试时候多么的鸦雀无声,事后心里就有多么的千军万马。去掉最开始毕业干了一年的Jav...

xmqywx
今天
0
0
Win10 64位系统,PHP 扩展 curl插件

执行:1. 拷贝php安装目录下,libeay32.dll、ssleay32.dll 、 libssh2.dll 到 C:\windows\system32 目录。2. 拷贝php/ext目录下, php_curl.dll 到 C:\windows\system32 目录; 3. p...

放飞E梦想O
今天
0
0
谈谈神秘的ES6——(五)解构赋值【对象篇】

上一节课我们了解了有关数组的解构赋值相关内容,这节课,我们接着,来讲讲对象的解构赋值。 解构不仅可以用于数组,还可以用于对象。 let { foo, bar } = { foo: "aaa", bar: "bbb" };fo...

JandenMa
今天
1
0
OSChina 周一乱弹 —— 有人要给本汪介绍妹子啦

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享水木年华的单曲《中学时代》@小小编辑 手机党少年们想听歌,请使劲儿戳(这里) @须臾时光:夏天还在做最后的挣扎,但是晚上...

小小编辑
今天
18
4
centos7安装redis及开机启动

配置编译环境: sudo yum install gcc-c++ 下载源码: wget http://download.redis.io/releases/redis-3.2.8.tar.gz 解压源码: tar -zxvf redis-3.2.8.tar.gz 进入到解压目录: cd redis-3......

hotsmile
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部