jQuery 动态元素添加
有这么一道题
<!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 动态元素添加的更多相关文章
- JQuery为元素添加样式的实现方法
由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好 为定义好的css样式可以调用元素的css方法添加样式 $("span").cs ...
- Jquery 动态添加元素 添加点击事件
给动态添加的元素添加js事件,不能直接添加js事件,需要借助on( )方法,给选择器指定的子元素添加事件处理函数,并非选择器本身: 1. 语法 $(selector).on(event,childSe ...
- js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140 ...
- JQuery为元素添加样式
由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好 为定义好的css样式可以调用元素的css方法添加样式 $("span").cs ...
- jquery给元素添加样式表的方法
//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...
- jquery动态添加的元素不能直接应用事件方法的时候
对于由 jQuery 动态生成的元素,如用 jQuery 给元素添加 class,或者直接添加一对 p 标签,不能直接绑定常用的事件,如 click.因为这些元素属于动态生成,除非采用 onclick ...
- jquery 动态增加的html元素，初始化设置在id或class上的事件无效
一般情况,我们会在页面初始化完成后对class定义一些全局事件,举个栗子: $(document).ready(function(){ $(".class").on("m ...
- jquery动态添加元素无法触发绑定事件的解决方案。
jquery动态添加元素无法触发绑定的事件的解决方案. ╭(●｀∀´●)╯二狗最近在工作中遇到一个问题,即当用jquery动态添加元素后,发现给动态添加的元素却无法触发事件(╯#-_-)╯╧═╧ ( ...
- jquery动态添加元素无法触发绑定的事件的解决方案
方法一:绑定live事件(live事件只在jquery1.9以下才支持,高版本不支持). //jquery 1.9(不包括1.9)以下可以 $(".btn").live(" ...
随机推荐
- Android Studio 代码混淆
新建一个项目,Android Studio默认关闭代码混淆开关,在build.gradle文件中,如下图所示的minifyEnabled 开关,因此如果需要混淆代码,需将false改为true,然后在 ...
- Linux c 信号—pause、sigsuspend 的相同于区别
pause函数: 功能:让进程暂停直到信号出现 #include<unistd.h> intpause(); 函数说明:pause()会令目前的进程暂停(进入睡眠状态),直至信号 ...
- Servlet -- 跳转到页面后的绝对路径与相对路径的问题
我们在使用servlet或其它框架,从后台跳转到视图层的时候.常会遇到这种情况,CSS和JS文件失效了,可是假设通过网址直接訪问JSP是没问题的. 这就是由于绝对路径和相对路径导致的. 绝对路径.就是 ...
- BSTR、char*和CString转换
(1) char*转换成CString 若将char*转换成CString,除了直接赋值外,还可使用CString::Format进行.例如: char chArray[] = "This ...
- iOS 10中如何搭建一个语音转文字框架
在2016WWDC大会上,Apple公司介绍了一个很好的语音识别的API,那就是Speech framework.事实上,这个Speech Kit就是Siri用来做语音识别的框架.如今已经有一些可用的 ...
- CSS hank
CSS hank CSS hank是为了让CSS代码兼容不同浏览器,也可以通过CSS hank为不同的浏览器设置不同的CSS样式. CSS hank的3种表现形式: 类内部hank IE6能识别下划线 ...
- POJ 3461 Oulipo（模式串在主串中出现的次数）
题目链接:http://poj.org/problem?id=3461 题意:给你两个字符串word和text,求出word在text中出现的次数 思路:kmp算法的简单应用,遍历一遍text字符串即 ...
- FPGA中改善时序性能的方法_advanced FPGA design
本文内容摘自<advanced FPGA design>对应中文版是 <高级FPGA设计,结构,实现,和优化>第一章中的内容 FPGA中改善时序,我相信也是大家最关心的话题之一 ...
- linux下挂载第二块硬盘
1.第一步:添加硬盘/新建分区(fdisk) a.查看当前系统所有硬盘及分区情况:fdisk -lb.在指定的硬盘(例:/dev/sda)上创建分区:fdisk /dev/sda , 根据提示进行下一 ...
- 项目管理软件伙伴https://www.huobanyun.cn/
现在项目管理软件市面上很多,但能够完全适合每家公司需求的比较难找,因为众口难调,每家公司都有自己的特殊情况,所以,建议考虑下有比较齐全的基础功能的标准化软件产品,同时又在项目管理开发能力上比较突出. ...