有这么一道题

<!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 动态元素添加的更多相关文章

  1. JQuery为元素添加样式的实现方法

    由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好 为定义好的css样式可以调用元素的css方法添加样式 $("span").cs ...

  2. Jquery 动态添加元素 添加点击事件

    给动态添加的元素添加js事件,不能直接添加js事件,需要借助on( )方法,给选择器指定的子元素添加事件处理函数,并非选择器本身: 1. 语法 $(selector).on(event,childSe ...

  3. js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140 ...

  4. JQuery为元素添加样式

    由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好 为定义好的css样式可以调用元素的css方法添加样式 $("span").cs ...

  5. jquery给元素添加样式表的方法

    //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...

  6. jquery动态添加的元素不能直接应用事件方法的时候

    对于由 jQuery 动态生成的元素,如用 jQuery 给元素添加 class,或者直接添加一对 p 标签,不能直接绑定常用的事件,如 click.因为这些元素属于动态生成,除非采用 onclick ...

  7. jquery 动态增加的html元素，初始化设置在id或class上的事件无效

    一般情况,我们会在页面初始化完成后对class定义一些全局事件,举个栗子: $(document).ready(function(){ $(".class").on("m ...

  8. jquery动态添加元素无法触发绑定事件的解决方案。

    jquery动态添加元素无法触发绑定的事件的解决方案. ╭(●｀∀´●)╯二狗最近在工作中遇到一个问题,即当用jquery动态添加元素后,发现给动态添加的元素却无法触发事件(╯#-_-)╯╧═╧ ( ...

  9. jquery动态添加元素无法触发绑定的事件的解决方案

    方法一:绑定live事件(live事件只在jquery1.9以下才支持,高版本不支持). //jquery 1.9(不包括1.9)以下可以 $(".btn").live(" ...

随机推荐

  1. HDU 1512 Monkey King（左偏树+并查集）

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=1512 [题目大意] 现在有 一群互不认识的猴子,每个猴子有一个能力值,每次选择两个猴子,挑出他们所 ...

  2. HDU 4983 Goffi and GCD

    题目大意:给你N和K,问有多少个数对满足gcd(N-A,N)*gcd(N-B,N)=N^K.题解:由于 gcd(a, N) <= N,于是 K>2 都是无解,K=2 只有一个解 A=B=N ...

  3. 校园招聘 - 比較easy的面试题

    又到校园招聘的季节了, 自从和一些同事出版了<编程之美>一书之后, 我常常收到一些关于面试, 编程,  和"题库"的询问. 事实上我自己对算法没有什么研究, 有些问题都 ...

  4. Android 类似未读短信图标显示数字效果的分析

    之前一直以为是应用本身在对图标进行修改,看了源码之后发现其实主要的工作并不是应用自己完成的,主要的工作在是launcher里面完成的. 关于系统里面类似未读短信的具体处理流程如下, 原理 一个应用要实 ...

  5. zoj 2376 Ants

    #include<stdio.h> #include<stdlib.h> ]; int main(void) { int t,n,m,i,len,max,min,mx,mi; ...

  6. ACM比赛

    Description A soldier wants to buy w bananas in the shop. He has to pay k dollars for the first bana ...

  7. Lucence.Net+添加关键词+分页+排序

    1.使用queryparser完成解析搜索请求 2.基本格式如: QueryParser parser=new QueryParser("字段名称","分析器实例&quo ...

  8. js表格排序 & 去除字符串空格

    // a:列数 bool:排序升序判断参数 true false Str:支持多列 function newUnitSort(a, bool, str) { var oTable = document ...

  9. ssh无密登录

    ssh登录一般两种方式: 1.密码登录 2.密钥验证无需密码 使用方式:1.生成密钥 2.将公钥追加到authorized_keys中,需要注意的是执行权限需为600,这里因而第一次添加使用的是> ...

  10. QT全局热键（用nativeKeycode封装API，不跨平台）

    在网上找了很长时间,大家都提到了一个QT全局热键库(qxtglobalshortcut),支持跨平台.在这篇文章中,我将只展示出windows平台下全局热键的设置. 这里提供的方法是在MyGlobal ...