有这么一道题

<!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 3507 Print Article（CDQ分治+分治DP）

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=3507 [题目大意] 将长度为n的数列分段,最小化每段和的平方和. [题解] 根据题目很容易得到dp ...

  2. Codeforces Beta Round #97 (Div. 2)

    A题求给出映射的反射,水题 #include <cstdio> int x,ans[105],n; int main(){ scanf("%d",&n); fo ...

  3. react-native 入门资源合集

    # 了解react-native React Native enables you to build world-class application experiences on native pla ...

  4. 【Oracle】RAC添加新节点

    RAC添加节点: 环境: OS:OEL5.6 RAC:10.2.0.1.0 原有rac1,rac2两个节点.如今要添加rac3节点: 操作过程: 改动三个节点上的/etc/hosts文件 192.16 ...

  5. （HLS播放器之中的一个）HLS协议之M3U8解析

    參照 http://tools.ietf.org/html/draft-pantos-http-live-streaming-08, 能够对M3U8有比較系统的认识. HLS(HTTP Live St ...

  6. c++栈管理库TCMalloc、jeMalloc

    示例:http://blog.csdn.net/chosen0ne/article/details/9338591

  7. Problem B The Blocks Problem（vector的使用）

    题目链接:Problem B 题意:有n块木块,编号为0~n-1,要求模拟以下4种操作(下面的a和b都是木块编号) 1. move a onto b: 把a和b上方的木块全部归位,然后把a摞在b上面. ...

  8. JQuery中文本框获取焦点

    今天遇见这么一个小小的问题,就是文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点! 这么一个简单的事情如果没有使用jQuery的话 是不是对象.focus()就可以了, 可是当我 ...

  9. RatProxy

    http://book.51cto.com/art/201212/374023.htm http://www.oschina.net/p/ratproxy/similar_projects

  10. 基于Visual C++2013拆解世界五百强面试题--题8-数组的排序和查找

    用三种方法实现对一个数组的排序,并设计一个函数实现数的查找,要求时间越短越好,空间占用越少越好. 对数组排序的方法很多,我们选比较常用和容易的三种排序,直接插入排序,冒泡排序和快速排序. 直接插入排序 ...