jquery动态生成的锚可以添加onclick事件吗?
最近在练习jquery,想做一个各异动态添加输入框的表单,关键代码如下:
<script type="text/javascript">
var count = 2;
$(document).ready(function() {
$("#first").show();
$("button").click(function() {
var div = "<div> <b>用户名 " + count++
+ ": </b><input type='text' name='uname' placeholder='请输入您的用户名' required />"
+ " <img src='img/del.gif'/><a href='javascript:void(0)'>删除</a></div>";
$("#f").append(div);
$("div:last").slideDown();
});
$("a").click(function() {
alert(count);
$(this).parent().remove();
});
});
</script>
页面的元素代码:
<form id="f" method="get" action="user">
<input type="hidden" name="task" value="add" />
<button>添加</button><br/>
<input type="submit" value="提交" />
<div id="first">
<b> 用户名 1: </b><input type="text" name="uname" placeholder="请输入您的用户名" required />
<img src='img/del.gif'/><a href='javascript:void(0)'>删除</a>
</div>
</form>
现在的情况是:
div可以无限添加,但是只有第一个可以删除,之后的div点击链接都没用,alert()也没反应。
这是啥情况?是jquery生成的元素不可以添加点击事件吗?实在想不通,恳请诸位大神给小弟指条明路。谢谢了!
------解决方案--------------------是因为你根本给新生成的元素添加事件,在执行$("a").click()的时候页面上只有一个a元素,就只给这一个a元素元素添加事件了
你这个情况最好是使用委派事件的方式绑定事件处理程序
$("#f").on("click","a",function() {
$(this).parent().remove();
});