有这么一道题
<!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