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