jQuery 动态元素添加
有这么一道题
<!DOCTYPE html>
<head>
<title>前端工程师面试题</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- <script type="text/javascript" src="http://files.cnblogs.com/darkangle/list.js"></script>
-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="forTestJQ.js"></script>
<style>
*{padding:0;margin:0;}
a{outline:none;text-decoration:none;}
body{font: 14px/1.5 arial}
.w960{width:560px;margin:0 auto;}
.hd{background: #059ed3;color:#fff;}
.hd,.ft{padding:5px;}
.ft{background:#ccc;text-align:right;}
.row{padding:5px;border-bottom:solid 1px #eee;}
.row div{display:inline}
.row a{float:right;}
.ft a{color:green;font-weight:bold}
code{display:block;border:solid 1px #666;padding:10px;background:#ffffc0;}
h3{margin:10px 0;color:#ff9900;}
input{border:solid 1px #c0c0c0;line-height:1.5em;height:1.5em}
</style>
</head>
<body>
<div class="w960">
<h3>第一题：请使用Javascript实现以下动态效果</h3>
<p>可以使用任何你喜欢的方式和库，尽量使用你认为优雅的实现，并在代码完成说简要说明此方案的优点和不足。</p>
<div id='msg'></div>
<div id="datalist">
<div class="hd">
现在一共有： <strong class="item_count"></strong>
个条目
</div>
<div class="list">
<div class="row">
<div>这是第一条</div>
<a href="javascript:;">修改</a>
</div>
<div class="row">
<div>这是第二条</div>
<a href="javascript:;">修改</a>
</div>
<div class="row">
<div>花儿为什么这样红？</div>
<a href="javascript:;">修改</a>
</div>
<div class="row">
<div>你知道小月月是哪个不？</div>
<a href="javascript:;">修改</a>
</div>
<div class="row">
<div>人生就是一个杯具</div>
<a href="javascript:;">修改</a>
</div>
</div>
<div class="ft">
<a href="javascript:;">新增条目</a>
</div>
</div> </div>
</body>
</html>
我的答案
$(function() {
countItems();
changeListener();
newItem();
inputBlur();
//okButton();
});
function countItems() {
var total = 0;
$('#datalist .list .row').each(function(index, val) {
/* iterate through array or object */
total++;
});
$('strong.item_count').text(total);
}
function changeListener() {
//所有通过动态方式增添的元素得选择器都在on()中得第二个参数中
//$('xxx')这里面只对静态元素有效
$('#datalist .list ').on('click', '.row a',function(event) { // 为了使动态创建的元素也能应用
event.preventDefault();
var self = $(this);
var str = $(this).prev('div').text();
$(this).prev('div').text('');
//创建新元素 http://blog.sina.com.cn/s/blog_6f816c050100mzf2.html
// pre.append(next) inner.appendTo(wrapper)
$('<input>', {
type: 'text',
val: str,
}).appendTo(self.prev('div'));
//这里用$(this)也是可以的 是因为appendTo()里面并不是function 所以$(this)并不会指向input
});
}
function newItem() {
$('#datalist .ft a').click(function(event) {
/* Act on the event */
var item = '<div class="row"><div><input type="text" value="" /></div><a class="ok" href="javasript:;">ok</a></div>';
$(item).insertAfter('#datalist .list .row:last');
//前面这里还可以写为 $('<p>xxx<p>').insertAfter('xxxx')
});
}
function inputBlur() {
$('#datalist .list ').on('focusout','.row input', function(event) {
event.preventDefault();
var self=$(this);
self.parent().next('a').text('修改')
var str = self.val();
self.parent().text(str);//之后input已经被消去
$('#msg').text(self.parent().text());//之后再用self就没有用了 因为元素已经被消去了
});
}
function okButton() {
$('#datalist .list ').on('click', '.row a.ok',function(event) {
alert('ok');
// var str=$(this).prev().children('input:first').val();
// $(this).prev().text(str);
// $(this).prev().children('input').remove();
});
}
其中 $('#datalist .list ').on('focusout','.row input', function(event) {
通过 https://api.jquery.com/on/ 看到动态元素的blur和focus 应该使用 focuesout 和 focusin
jQuery 动态元素添加的更多相关文章
- JQuery为元素添加样式的实现方法
由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好 为定义好的css样式可以调用元素的css方法添加样式 $("span").cs ...
- Jquery 动态添加元素 添加点击事件
给动态添加的元素添加js事件,不能直接添加js事件,需要借助on( )方法,给选择器指定的子元素添加事件处理函数,并非选择器本身: 1. 语法 $(selector).on(event,childSe ...
- js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140 ...
- JQuery为元素添加样式
由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好 为定义好的css样式可以调用元素的css方法添加样式 $("span").cs ...
- jquery给元素添加样式表的方法
//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...
- jquery动态添加的元素不能直接应用事件方法的时候
对于由 jQuery 动态生成的元素,如用 jQuery 给元素添加 class,或者直接添加一对 p 标签,不能直接绑定常用的事件,如 click.因为这些元素属于动态生成,除非采用 onclick ...
- jquery 动态增加的html元素，初始化设置在id或class上的事件无效
一般情况,我们会在页面初始化完成后对class定义一些全局事件,举个栗子: $(document).ready(function(){ $(".class").on("m ...
- jquery动态添加元素无法触发绑定事件的解决方案。
jquery动态添加元素无法触发绑定的事件的解决方案. ╭(●｀∀´●)╯二狗最近在工作中遇到一个问题,即当用jquery动态添加元素后,发现给动态添加的元素却无法触发事件(╯#-_-)╯╧═╧ ( ...
- jquery动态添加元素无法触发绑定的事件的解决方案
方法一:绑定live事件(live事件只在jquery1.9以下才支持,高版本不支持). //jquery 1.9(不包括1.9)以下可以 $(".btn").live(" ...
随机推荐
- 配置vim之插件
涉及linux平台下ctags, taglist插件 ctags是一个用于产生代码索引文件的插件,它产生的索引可以帮助我们更快的定位到特定位置. ctags支持很多语言,比如java, c, c++, ...
- JS 在html中的位置
前言 当我了解完html在浏览器中的解析渲染流程后,反而又发现了新的困扰自己的问题. Q:即然html要渲染需要渲染树,而渲染树又需要DOMTree和CSSRuleTree,DOMTree需要解析HT ...
- final, finally, finalize 的区别
1.final 用于声明属性, 方法和类, 分别表示属性不可变, 方法不可覆盖, 类不可继承.内部类要访问局部变量, 局部变量必须定义成 final 类型, 例如, 一段代码…… 2.finally ...
- [Swust OJ 838]--最优价值(0-1背包+数学)
题目链接:http://acm.swust.edu.cn/problem/838/ Time limit(ms): 1000 Memory limit(kb): 10000 Description 我 ...
- BZOJ 2337: [HNOI2011]XOR和路径( 高斯消元 )
一位一位考虑异或结果, f(x)表示x->n异或值为1的概率, 列出式子然后高斯消元就行了 --------------------------------------------------- ...
- BZOJ 1218: [HNOI2003]激光炸弹( 前缀和 + 枚举 )
虽然source写着dp , 而且很明显dp可以搞...但是数据不大 , 前缀和 + 枚举也水的过去..... -------------------------------------------- ...
- java 去除数组重复数据，并输出重复数据值
/** * 去除重复数据 * @author Sunqinbo */ public class RemoveDuplicateData { public static void main(String ...
- [LeetCode]题解（python）：070-Climbing Stairs
题目来源: https://leetcode.com/problems/climbing-stairs/ 题意分析: 爬楼梯,一次可以爬一步或者两步.如果要爬n层,问一共有多少种爬法.比如说,如果是3 ...
- JS笔记 入门第一
WHY? 一.你知道,为什么JavaScript非常值得我们学习吗? 1. 所有主流浏览器都支持JavaScript. 2. 目前,全世界大部分网页都使用JavaScript. 3. 它可以让网页呈现 ...
- sql server 常见问题
自动生成的值 @@identity 存储过程参数应指定参数长度,且不大于数据库长度,自定义方法里如果有参数,也应指定长度,否则会报错,提取数据长度被断 connectionString 可以指定app ...