Question

Jquery,在动态添加标签的时候问题？

当我点击 +添加 这个文字的时候， 他的前面会添加一个标签 文本框， 可是为什么添加成功之后， 点击这个文本框 也能再次的添加一个新的文本框，？ 为什么呢?
这是我的代码！
$("#add_zucheng").click(function(){
var value = '<input type="text" style="border-width:0;border-bottom:1 solid blue;" >'+'</input>';
$(this).prepend(value);
});
求大神指点！

Answer 1

prepend() 方法在被选元素的开头（仍位于内部）插入指定内容，你插入的input仍然属于#add_zucheng这个元素，所以点击文本框就触发了$("#add_zucheng").click事件

你应该使用before() 方法——在被选元素前插入指定的内容。

$("#add_zucheng").click(function(){
          var value = '<input type="text" style="border-width:0;border-bottom:1 solid blue;" >'+'</input>'; 
          $(this).before(value);
     });

Answer 2

prepend() 方法在被选元素的开头（仍位于内部）插入指定内容。
假设你的HTML长这样：
<a id="add_zucheng">add_zucheng</a>
点击后则成这样：
<a id="add_zucheng">
<input type="text" style="border-width:0;border-bottom:1 solid blue;">
add_zucheng</a>
所以点击新增的input也会触发这个单击事件。
$(this).prepend(value);可改成$(this).before(value);