質問
以下でAppendBox関数を使用すると、初めて正常に動作し、RemoveBoxで同じように動作しますが、2回目は正しく動作しません。コンテンツを複製します。
なにが問題ですか?
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でしか起こるのか、つまり時々起こるのかわからない。
所属していません StackOverflow