jq对动态生成的节点绑定事件
-
介绍:当我们在jsp页面中点击“+”按钮生成一个新的卡号文本框,每个文本框后面有一个“-”可以进行删除当前卡号的行,所以这个生成的卡号行都是js动态生成,对应的删除行事件不能嵌套onclick事件,只能用on事件进行动态绑定
//点击add-card插入新的元素 $(".add-card").click(function () { var newHtml = ''; newHtml += '<div class="inputItem">'; newHtml += '<input type="text" name="" class="cardNum" style="margin-left: 88px;" placeholder="请输入卡号">'; newHtml += '<div class="del-card">-</div>'; /*onclick="deleteCardItem();"这种写法不生效*/ newHtml += '</div>'; $(this).parent().after(newHtml); }); //点击del-card时通过其父节点addPopuForm绑定点击事件传到子节点进行删除操作 $("#addPopuForm").on("click", '.del-card', function () { $(this).parent().remove(); });
$("#addPopuForm")对应卡号文本框的外层容器