1

当我使用下面的 appendBox 函数时，第一次它可以正常工作并且与 removeBox 相同，但第二次它不能正常工作：它复制了我的内容。

怎么了？

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>
4

3 回答 3

3

我会改变你这样做的方式。一个更典型的解决方案是这样的：

<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 中并根据需要进行调整。原理都是一样的。

于 2009-09-21T09:08:56.807 回答
2

如果要移动现有元素，请尝试：

$("#appendbox-"+ id ).appendTo('#listMyBoxs');

使用$("<div></div>")或.append("<div></div>")创建一个新元素。

于 2009-09-21T08:50:22.930 回答
1

同样的问题，我曾经使用 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 中。

于 2019-05-19T23:16:06.133 回答