Почему JQuery придает дублирование моего контента?
Вопрос
Когда я использую функцию 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>
Решение
Я бы изменил способ, которым вы это делаете. Более типичное решение хотелось бы это:
<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 иногда.