有这么一道题

<!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. Java 根据comboBox选择结果显示JTable

    处理这样的问题的主要思路是:     对于JTable,JTree等Swing控件,都有一个对应的Model用来存储数据,JTable对应的有一个DefaultTableModel.     Defa ...

  2. Android eng版系统烧录

    这里我只能记录下过程 Android有四层,最底层的Linux是一个kernel,然后是运行时库层,驱动大部分在这两层完成,接着是Framework层,主要是Android源码,最后是在源码基础上进行 ...

  3. Dropping Balls （二叉树+思维）

      Dropping Balls  A number of K balls are dropped one by one from the root of a fully binary tree st ...

  4. 浅析linux中的fork、vfork和clone

    各种大神的混合,做个笔记. http://blog.sina.com.cn/s/blog_7598036901019fcg.html http://blog.csdn.net/kennyrose/ar ...

  5. H5 应用程序返回button的js代码设计，设计仿stack

    history.back(); 该代码具有天然的缺陷,二手知道,于H5应用,尤其是模仿移动应用程序时,,这是不够. 在放大期js为了实现类似特征,请轻喷. 不多说,上代码: /** * Created ...

  6. iOS网络开发-打造自己的视频客户端

    一.展示实现 效果      客户端:                                      服务器端:            二.创建表 create table CourseV ...

  7. Matlab中的取整-floor,ceil,fix,round

    FLOOR Round towards minus infinity. FLOOR(X) rounds the elements of X to the nearest integers toward ...

  8. BZOJ 1816: [Cqoi2010]扑克牌( 二分答案 )

    二分答案.. 一开始二分的初始右边界太小了然后WA,最后一气之下把它改成了INF... -------------------------------------------------------- ...

  9. LintCode-删除元素

    题目描述: 给定一个数组和一个值,在原地删除与值相同的数字,返回新数组的长度. 元素的顺序可以改变,并且对新的数组不会有影响. 样例 给出一个数组 [0,4,4,0,0,2,4,4],和值 4 返回 ...

  10. Ubuntu离线安装软件包

    一.应用场景 a.当我们需要在多台电脑安装同一个软件,并且这个软件很大,下载需要很长时间时 b.需要安装软件的ubuntu不能上网 二.离线安装包的制作 2.1.通过如下指令下载XXXX软件所需要的d ...