zoukankan      html  css  js  c++  java
  • jQuery获取动态生成的元素

    需求描写叙述:页面上能够动态加入数据,比方table,点击按钮能够动态加入行。

    又或页面

    载入时table数据是通过ajax从后台获取的。而这时我们想要获取当中的某个值,又该怎样获取呢?

    假设是要通过某个事件来获取的比方click,mouseover等等,则能够使用live()方法

    $(".button").live("click",function(){  
         console.info($("#mytd").html());  
    }) 
    live()的具体说明參考http://blog.csdn.net/itmyhome1990/article/details/17380665

    而假设不是通过某个事件,当页面载入的时候我们就要获取值或进行其它操作

    live()方法就不行了,由于我们无法传入一个事件。

    比方下面代码:

    <body>
    	<table id="tab" border="1" width="30%">
    		
    	</table>
    </body>
    <script type="text/javascript">
    	$(function() {
    	     $.post("admin/UserForumthemeBabygrowupFrontList.do",{},function(data){
    		   console.info(data.table);
    		   $("#tab").append(data.table);
    	     })
    		
    	     alert($("#mytd").html());	//获取值	
    	});
    </script>
    以上代码非常easy,就是通过post从后台返回的值加入到<table>中

    后台返回数据为 <tr><td id='mytd'>北京</td><td>深圳</td></tr>而我们要在post之后获取id为mytd的值,

    此时是获取不到的,我们从浏览器中就能够观察出问题:

    从以上能够看出在alert的时候 数据并还没有载入出来 控制台也并没有打印出信息,所以此时是取不到数据的。


    使用ajaxComplete()方法能够在请求完毕时运行要运行的代码,我们改动为例如以下:

    $(function() {
    	$.post("admin/UserForumthemeBabygrowupFrontList.do",{},function(data){
    		console.info(data.table);
    		$("#tab").append(data.table);
    	})
    	$("#tab").ajaxComplete(function(){  //待请求完毕时 运行 
    		alert($("#mytd").html());
    	})
    });

    此时再获取的时候页面已载入完数据。




  • 相关阅读:
    cropperjs图片裁剪工具、NProgress进度条
    Chrome浏览器上安装Vue Devtools
    原生JS---数组去重总结
    原生JS--获取DOM节点
    call,apply,bind初识
    原生JS--数组循环总结
    01-vue项目之滚动加载数据
    原生JS---解构赋值
    克隆数组的几种方式?
    原生JS设置、删除、获取Cookie
  • 原文地址:https://www.cnblogs.com/lxjshuju/p/7290536.html
Copyright © 2011-2022 走看看