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="https://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
