Почему приложение jQuery дублирует мой контент?

Question

Когда я использую функцию 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>

Answer 1

Я бы изменил то, как ты это делаешь. Более типичное решение будет выглядеть так:

<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 и при необходимости изменить. Принципы все одинаковы.

Answer 2

Если вы хотите переместить существующий элемент , попробуйте:

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

Использование $("<div></div>") или .append("<div></div>") создает новый элемент.

Answer 3

Та же проблема здесь, я использовал для добавления контента на страницу, используя 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.