لماذا expend jQuery يكرر المحتوى الخاص بي؟

Question

عندما أستخدم وظيفة Appendbox أدناه، فإن المرة الأولى التي تعمل بشكل جيد ونفس الشيء مع مربع التغليف، ولكن المرة الثانية لا يعمل بشكل صحيح: إنه يكرر المحتوى الخاص بي.

ما الخطأ؟

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'>");
        }

لا أعرف لماذا يحدث هذا فقط في فايرفوكس وأي أحيانا.