题
当我在下面使用附录盒函数时,首次使用删除框的功能正常,但是第二次无法正常工作:它可以复制我的内容。
怎么了?
function appendBox( id )
{
$("#listContainer").append("<div id=\"appendbox-"+ id +"\"><a href=\"javascript:removeBox("+ id +");\">remove</a></div>");
$("#addBox-"+ id ).slideUp();
}
function removeBox( id )
{
$("#listMyBoxs").append("<div id=\"addBox-"+ id +"\"><a href=\"javascript:appendBox("+ id +");\">tilføj</a></div>");
$("#appendbox-"+ id ).slideUp();
}
这是我尝试此测试时的HTML
<div style="height: 200px; border: 1px solid black;">
<div id="listContainer"></div>
<div id="listMyBoxs">
<div id="addBox-1">
<a href="javascript:appendBox( 1 );">tilføj</a>
</div>
</div>
</div>
解决方案
我会改变您的方式。一个更典型的解决方案会这样:
<div id="outer">
<div id="listContainer"></div>
<div id="listMyBoxes">
<a href="#">tilføj</a>
</div>
</div>
和:
#outer { height: 200px; border: 1px solid black; }
#outer a { display: block; }
和
$(function() {
$("#listContainer a").live("click", function() {
$(this).slideUp(function() {
$(this).appendTo("#listMyBoxes").text("remove").slideDown();
});
return false;
});
$("#listMyBoxes a").live("click", function() {
$(this).slideUp(function() {
$(this).appendTo("#listContainer").text("tilføj").slideDown();
});
return false;
});
});
根据需要进行调整。如果您需要比简单链接更复杂的内容,则可以将其包装在DIV中并根据需要进行调整。原则都是一样的。
其他提示
如果您想移动 现有元素, , 尝试:
$("#appendbox-"+ id ).appendTo('#listMyBoxs');
使用 $("<div></div>")
或者 .append("<div></div>")
创建一个新元素。
在这里,我曾经使用JavaScript和jQuery将内容附加到页面上,它在Chrome上正常工作,但是在使用Firefox尝试时,它会复制附加内容。
我使用此代码将内容附加到DIV:
function PlayGames() {
$(".gameActions, #flash-game").show();
$(".TheGame").show().append("<object id='flash-game' type='application/x-shockwave-flash' height='100%' width='100%' frameborder='0' scrolling='no' data='URL'>");
}
不知道为什么有时只会在Firefox和IE中发生这种情况。
不隶属于 StackOverflow