<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>设置</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script charset="utf-8">
$(function () {
$('.del').on('click' ,function () {
$(this).parents('.ibox').remove();
})
var array = ["9", "2", "3", "4", "5"];
$("#addnum").click(function () {
for (i = 0; i < array.length; i++) {
add()
$(".num :eq(" + i + ")").val(array[i]);
}
})
function add(){
var tr = '<p class="ibox"> ' +
'<input type="text" class="num" maxlength="3" value=""/>' +
'<input type="button" value="删除" class="del"/>' +
'</p>';
$('#inputfield').append(tr);
}
})
</script>
</head>
<body>
<p>
<button height="8" type="button" id="addnum">+</button>
</p>
<p id="inputfield">
</p>
</body>
</html>
"如上代码 尝试这创建了一批输入框 并使用on函数提前绑定元素 但是发现 如果把
$('.del').on('click' ,function () {
$(this).parents('.ibox').remove();
})
"
放到function add之内 添加元素del才有效果 放在add之外就不能附带效果，和文档里面说的“即使是执行on()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数也对其有效。”不一致求解惑
巴扎黑2017-04-10 15:27:11
@浅黑色 是正解；
除此之外，针对这种“创建元素之前想绑定事件”，还可以很简单地使用live绑定到document上：
$('.del').live('click' ,function () {
$(this).parents('.ibox').remove();
})
天蓬老师2017-04-10 15:27:11
$('#inputfield').on('click' ,'.del',function () {
$(this).parents('.ibox').remove();
})
通过父元素来对其子元素绑定事件
PHP中文网2017-04-10 15:27:11
如果楼主用1楼的办法，就需要加上防止事件冒泡的代码。
//jquery code
$("p").click(function(event){
event.stopPropagation();
// do something
})
