Pourquoi jQuery append dupliquer mon contenu?

Question

Quand j'utilise la fonction appendBox ci-dessous, la première fois, il fonctionne très bien et même avec removeBox, mais la deuxième fois, il ne fonctionne pas correctement. Il fait double emploi avec mon contenu

Quel est le problème?

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();
}

c'est mon html lorsque je tente ce test

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

Answer 1

Je changerais la façon dont vous le faites. Une solution plus typique comme ceci:

<div id="outer">
  <div id="listContainer"></div>
  <div id="listMyBoxes">
    <a href="#">tilføj</a>
  </div>
</div>

avec:

#outer { height: 200px; border: 1px solid black; }
#outer a { display: block; }

et

$(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;
  });
});

Ajuster au besoin. Si vous avez besoin d'un contenu plus complexe qu'un simple lien, vous pouvez joindre que dans un div et ajuster si nécessaire. Les principes sont les mêmes.

Answer 2

Si vous voulez déplacer un élément existant , essayez:

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

Utilisation $("<div></div>") ou .append("<div></div>") crée un nouvel élément.

Answer 3

Le même problème ici, je l'habitude d'ajouter du contenu à la page à l'aide de javascript et jQuery, il fonctionne très bien à Chrome, mais en essayant avec Firefox il fait double emploi avec le contenu ajouté.

Voici un exemple:

J'utilise ce code pour ajouter du contenu à un 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'>");
        }

Je ne sais pas pourquoi cela ne se produit que dans Firefox et IE parfois.