jquery点击事件后增加克隆的标签,并改变克隆的属性加入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.js"></script>
</head>
<body>
<div id="outer">
<div id="item">
<input value="+" type="button" onclick="add(this)">
<input type="text" size="10px">
</div>
</div>
<script>
function add(ev) {
var copyer=$(ev).parent().clone(); // 设置一个变量等于要拷贝的内容,找到此标签的父级,clone()克隆.
copyer.children(":button").attr("value","-").attr("onclick","del(this)"); //按设定需求 把克隆内容里的value和onclick事件改变
$("#item").after(copyer); // 或者用$("#outer").append(copyer); 一个是找到兄弟的加入同级标签,一个是找到父级标签
//加入的方法也不同
}
function del(ev) {
$(ev).parent().remove()
}
</script>
</body>
</html>
本例是为了用jquery实现标签的添加,并改变元素.点加号可以增加复制的input标签,但是属性已经被改变,这里用到了colne()克隆方法;如果点减号,则删除了添加的本行.
jquery点击事件后增加克隆的标签,并改变克隆的属性加入的更多相关文章
- jQuery点击事件绑定onClick和on()
一.静态绑定 (1)onclick方法 jsp代码 <button href="javascript:;" class="weui_btn weui_btn_min ...
- jquery点击事件失效原因和解决办法
在使用jQuery绑定点击事件的时候,有时候会遇到点击无效,这种情况大多出现在动态添加元素的时候 例如:给demo里添加li元素给li绑定点击事件 $("#demo").appen ...
- Jquery 点击事件重复获取叠加 (一)
用jquery添加绑定事件 添加多少次 点击的时候就触发多少次 如果想解决这个问题 就在点击函数里先用 $(对象).off("click") 取消上一次的点击事件 上码: $(&q ...
- 关于jQuery点击事件叠加问题
先来看个例子: html: <body> <button id="btn">按钮</button> <button id="bt ...
- Android studio关于点击事件后的页面跳转,选择完成后返回(onActivityResult)
我这个人喜欢直接上代码,在代码中说明更方便,更直接. 首先在.xml中设置一个button按钮,和一个EditText框,并分别做好id号. 这里我以籍贯测试对象. <LinearLayout ...
- jquery trigger 触发事件小计 -- 关于a标签
jquery -- trigger触发执行事件方法虽然好用,偶尔也会出些小问题. 在最近得一个项目中需要触发a标签的点击事件时,我就遇到了点小问题.我很想当然的写层这样:$("a" ...
- 17_点击事件第四种写法_布局文件添加onclick属性
尽量不要用第四种点击事件的写法.在一万多行代码中发现了一个没被调用的代码 public void call(View v){//第四种写法参数一定是View v //public void call( ...
- jQuery触发<a>标签的点击事件后URL不跳转的解决办法
有HTML代码如下: <a id="workFrame" href="pages/work.html" target="FrameBox&quo ...
- 实现Jquery触发一事件后,停留5秒,再接着触发下面的事件
这里是一个广告位的Jquery的代码,有两个不同的广告位,一个是中间浮动显示的,显示5秒后自动消失,并限定每天仅出现一次(Cookie实现): //=====================广告位的j ...
随机推荐
- WPF DataGrid CheckBox 多选 反选 全选
效果图 实现此效果的必要关键是 Style+DataTemplate 关键代码: <Window.Resources> <DataTemplate x:Key="Check ...
- JavaScript中的原型模式
我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法.使用原型对象的好处是可以让所有对象实例共享它 ...
- JMeter Bean Shell
1.什么是bean Shell BeanShell是一种脚本语言,一种完全符合java语法的java脚本语言,并且又拥有自己的一些语法和方法,beanShell是一种松散类型的脚本语言(这点和JS类似 ...
- ### 20165219 2017-2018-2《Java程序设计》结对编程一 第二周总结
20165219 2017-2018-2<Java程序设计>结对编程一 第二周总结 结对对象 20165219王彦博 20165232何彦达 需求分析 实现一个程序,要求: 1 支持整数运 ...
- Sample-Code:Bing Search API
Demo link: http://code.msdn.microsoft.com/windowsazure/How-to-use-bing-search-API-4c8b287e Aspx Code ...
- 修改stl::set相关源码,提供有序属性值的查找接口
普通的stl::set,查找时只能传入key_type. 不能使用属性值查找. 例如: /* an employee record holds its ID, name and age */ clas ...
- opencv学习笔记1
#对图像的像素处理#法1print("------------------------")image = cv.imread("D:/1.jpeg",cv.IM ...
- 最短路径SPFA算法(邻接表存法)
queue <int> Q; void SPFA (int s) { int i, v; for(int i=0; i<=n; i++) dist[i]=INF; //初始化每点i到 ...
- java技术
线程池的原理及实现:https://blog.csdn.net/hsuxu/article/details/8985931 Java高级工程师面试题总结及参考答案:https://www.cnblog ...
- BZOJ - 2440 容斥定理
组合枚举n/i/i,贡献为miu倍 /*H E A D*/ int mu[maxn],prime[maxn],cnt; bool isprime[maxn]; void sai(int n){ mu[ ...