我有一个问题。可以使用javascript append添加删除<span>
元素吗?
当我尝试删除添加的跨度时,没有任何反应。
像这样:
<script type="text/javascript">
$(document).ready(function(){
$('#SelectBoxData span').click(function(){
var StatusID = this.id;
var StatusIDSplit = StatusID.split("_");
var StatusText = $('#SelectBoxData #' + StatusID).text();
$("#SelectBox").append('<span id=' + StatusID + '>' + StatusText + '</span>');
$("#SelectBoxData #" + StatusID).remove();
InputValue = $("#StatusID").val();
if(InputValue == ""){
$("#StatusID").val(StatusIDSplit[1]);
}
else{
$("#StatusID").val($("#StatusID").val() + ',' + StatusIDSplit[1]);
}
});
$('#SelectBox span').click(function(){
var StatusID = this.id;
$("#SelectBox #" + StatusID).remove();
});
});
</script>
<div id="SelectBoxBG">
<div id="SelectBox"><div class="SelectBoxBtn"></div></div>
<div id="SelectBoxData">
<span id="StatusData_1">Admin</span>
<span id="StatusData_2">Editor</span>
<span id="StatusData_4">Test 1</span>
<span id="StatusData_6">Test 2</span>
</div>
<input type="hidden" id="StatusID" />
</div>
请帮帮我。
感谢。
答案 0 :(得分:3)
是的,你可以删除它们。但是,您不能在它们存在之前向它们添加click
个事件处理程序。这段代码:
$('#SelectBox span').click(function(){
var StatusID = this.id;
$("#SelectBox #" + StatusID).remove();
});
只会在代码运行时向click
内的<span>
元素添加#SelectBox
事件处理程序(因此,根据您提供的HTML,零元素)。如果您希望事件处理程序对动态添加的元素做出反应,那么您需要使用.on()
函数使用event delegation的技术:
$('#SelectBox').on('click', 'span', function() {
$(this).remove(); // equivalent to the code you had before
});