有这么一道题

<!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. zoj 1366 Cash Machine

    01背包加变形 动态规划的时候就犯浑了,每个状态都要记录的,我却只记录了当前状态的!! #include<stdio.h> #include<string.h> int max ...

  2. 如何用cocoapods 来管理项目中的第三方框架？

     一.安装 1.如果以前安装过,升级到10.10后工作不正常,可以先删除cocoapods $ sudo gem uninstall cocoapods ----------------------- ...

  3. jsp 有哪些动作?作用分别是什么?

    答:JSP 共有以下 6 种基本动作jsp:include: 在页面被请求的时候引入一个文件.jsp:useBean: 寻找或者实例化一个 JavaBean.jsp:setProperty: 设置 J ...

  4. linux定时任务crontab的设置

    linux定时任务crontab的设置http://www.blogjava.net/freeman1984/archive/2010/09/23/332715.html vi /etc/cronta ...

  5. 【转载】Qt中的QString,QByteArray,Qchar, char*

    先要说的是QString.         之所以把QString单独拿出来,是因为string是很常用的一个数据结构,甚至在很多语言中,比如JavaScript,都是把string作为一种同int等 ...

  6. Web学习之自定义标签

    1.编写一个实现Tag接口的Java类(标签处理器类) package me.gacl.web.tag; import java.io.IOException; import javax.servle ...

  7. Docker背后的容器管理——Libcontainer深度解析

    Libcontainer 是Docker中用于容器管理的包,它基于Go语言实现,通过管理namespaces.cgroups.capabilities以及文件系统来进行容器控制.你可以使用Libcon ...

  8. 射频识别技术漫谈(26)——Felica的文件系统

    Felica的文件系统使用“系统\域\服务\数据块”的结构,如下图所示.通过这种结构实现对卡片非易失性存储区的使用和操作.                                     Fe ...

  9. Protel99se生成gerber文件的方法

    这几天工作中遇到制作 gerber 的问题,确实让我郁闷了一 番,为了方便大家,不要再受其苦,特将这一过程写成文档供有这方面需要的同仁们参考. 1 protel99se 打开要生成 gerber 的 ...

  10. android中文字高亮设置案例

    在android中我们有时候需要对一些标示性的文字进行高亮[用不同的颜色显示],例如微博中的@**等等...这些特效是通过SpannableString这个类来实现的 思路是将要显示的string进行 ...