jQuery Apple이 내 콘텐츠를 복제하는 이유는 무엇입니까?

StackOverflow https://stackoverflow.com/questions/1453458

  •  12-09-2019
  •  | 
  •  

문제

아래에서 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로 시도하면 추가 된 컨텐츠가 복제됩니다.

예는 다음과 같습니다.duplicate appeneded content

이 코드를 사용하여 컨텐츠를 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에서만 발생하는지 모르겠습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top