<分区>
标签 javascript jquery html css click
<分区>
我在删除动态生成的文本框上的按钮时遇到问题。单击函数根本不会被调用，我不确定为什么。有人可以指出我正确的方向吗？
这是代码:
HTML
<div class="panel panel-default">
<div class="panel-heading">Additional Authors</div>
<div class="panel-body">
<input id="addAuthorButton" type="button" value="Add Author" class="btn btn-lg btn-default btn-block" />
<div id="additionalAuthorsTextboxes">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
JS
$(document).ready(function(){
var counter = 0;
$("#addAuthorButton").click(function () {
if(counter==5){
alert("Only 5 additional authors allowed.");
return false;
}
counter++;
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'additionalAuthor' + counter).attr("class", 'additionalAuthor input-group');
newTextBoxDiv.after().html("<span class='input-group-addon'><span class='glyphicon glyphicon-user'></span></span><input class='form-control' type='text' placeholder='Author Name'><span class='input-group-addon'><span style='color: red;' class='glyphicon glyphicon-remove removeAdditionalAuthor'></span></span>");
newTextBoxDiv.appendTo("#additionalAuthorsTextboxes");
});
$(".removeAdditionalAuthor").click(function () {
$(this).closest('div').remove();
});
});
CSS
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css');
我还设置了一个 JSFiddle 页面:https://jsfiddle.net/302xsar2/2/
最佳答案
您需要使用事件委托(delegate)将事件附加到动态生成的元素:
$("#additionalAuthorsTextboxes").on('click','.removeAdditionalAuthor',function () {
$(this).closest('div').remove();
});
关于javascript - 不调用 jQuery 单击函数来删除动态生成的文本框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30432918/