jquery点击事件后增加克隆的标签,并改变克隆的属性加入

Posted 归来仍是少年!

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery点击事件后增加克隆的标签,并改变克隆的属性加入相关的知识,希望对你有一定的参考价值。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="jquery-3.2.1.js"></script>
 7 </head>
 8 <body>
 9     <div  id="outer">
10         <div id="item">
11             <input value="+" type="button" onclick="add(this)">
12             <input type="text" size="10px">
13         </div>
14     </div>
15 <script>
16     function add(ev) {
17         var copyer=$(ev).parent().clone();             // 设置一个变量等于要拷贝的内容,找到此标签的父级,clone()克隆.
18         copyer.children(":button").attr("value","-").attr("onclick","del(this)"); //按设定需求 把克隆内容里的value和onclick事件改变
19         $("#item").after(copyer);                      // 或者用$("#outer").append(copyer); 一个是找到兄弟的加入同级标签,一个是找到父级标签
20                                                                                           //加入的方法也不同
21     }
22     function del(ev) {
23         $(ev).parent().remove()
24     }
25 </script>
26 </body>
27 </html>
本例是为了用jquery实现标签的添加,并改变元素.点加号可以增加复制的input标签,但是属性已经被改变,这里用到了colne()克隆方法;如果点减号,则删除了添加的本行.

 

以上是关于jquery点击事件后增加克隆的标签,并改变克隆的属性加入的主要内容,如果未能解决你的问题,请参考以下文章

jQuery 克隆表单增加 name、class、id、data-id ..etc 的所有属性

如何使用 jQuery 添加(克隆)表单字段并增加 ID 和名称

jQuery:克隆元素和事件

带有标签的JQuery拖放不会克隆节点

jQuery学习-克隆节点

Jquery详解