有这么一道题

<!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. SPOJ 687 Repeats（后缀数组+ST表）

    [题目链接] http://www.spoj.com/problems/REPEATS/en/ [题目大意] 求重复次数最多的连续重复子串的长度. [题解] 考虑错位匹配,设重复部分长度为l,记s[i ...

  2. gdb篇

    转自:http://www.cnblogs.com/ypchenry/p/3668572.html 1.gdb的原理 熟悉linux的同学面试官会问你用过gdb么?那好用过,知道gdb是怎么工作的么? ...

  3. 如何写出专业级OOP程序-----文档注释

    由于时间的限制就写一些通用的注释啦> @author 姓名 这个标记将产生一个作者条目,可以使用多个@author注释,每个对应一个作者. @version 文本 这个标记产生版本条目,对当前版 ...

  4. Sql 字符串操作类COALESCE

    SqlServer中肯定有过将表中某列的值拼接成字符串,以","或者其他符号隔开的情况吧,一般情况我们会这样做: declare @returnValue nvarchar(max ...

  5. deque(双端队列)

    deque 是对queue的改进,增加了 push_front 和 pop_front 函数 , 和 双向链表作用差不多: 这里就不多讲了.可以参考: List(双向链表)

  6. USACO Section 5.4 TeleCowmunication(最小割）

    挺裸的一道最小割.把每台电脑拆成一条容量为1的边,然后就跑最大流.从小到大枚举每台电脑,假如去掉后 最大流=之前最大流+1,那这台电脑就是answer之一了. -------------------- ...

  7. Hibernate学习之hibernate状态

    hibernate有三种状态,transient(瞬时状态),persistent(持久化状态)以及detached(离线状态),瞬时状态就是刚new出来一个对象,还没有被保存到数据库中,持久化状态就 ...

  8. jquery回调函数callback的使用

    回调函数必须是全局函数或者静态函数,不可定义为某个特定的类的成员函数 callback函数在当前动画100%完成之后执行 $("p").hide(1000); alert(&quo ...

  9. jmeter 通过ant集成到jenkins

    jmeter可以通过ant自动执行测试脚本,然后集成到jenkins上,并发送测试报告 1.下载安装ant 2.将jmeter安装包extras文件夹里ant-jemter-1.1.1.jar 复制到 ...

  10. 在iOS上增加手势锁屏、解锁功能

    在iOS上增加手势锁屏.解锁功能 在一些涉及个人隐私的场景下,尤其是当移动设备包含太多私密信息时,为用户的安全考虑是有必要的. 桌面版的QQ在很多年前就考虑到用户离开电脑后隐私泄露的危险,提供了“离开 ...