كيفية الحفاظ على حدث Javascript الصحيح بعد استخدام cloneNode(true)

Question

لدي عنصر نموذج يحتوي على عدة أسطر من المدخلات.فكر في كل سطر باعتباره سمات لكائن جديد أرغب في إنشائه في تطبيق الويب الخاص بي.وأريد أن أكون قادرًا على إنشاء عدة كائنات جديدة في HTTP POST واحد.أنا أستخدم طريقة cloneNode(true) المضمنة في Javascript لاستنساخ كل سطر.تكمن المشكلة في أن كل سطر إدخال يحتوي أيضًا على رابط إزالة مرفق بحدث onclick الخاص به:

// prototype based
<div class="input-line">
    <input .../>
    <a href="#" onclick="$(this).up().remove();"> Remove </a>
</div>

عند النقر فوق رابط إزالة سطر الإدخال المستنسخ، فإنه يزيل أيضًا أي خطوط إدخال تم استنساخها من نفس كائن dom.هل من الممكن إعادة ربط الكائن "هذا" بعلامة الربط المناسبة بعد استخدام cloneNode(true) على عنصر DOM أعلاه؟

Answer 1

لا تضع معالجًا على كل رابط (يجب أن يكون هذا زرًا حقًا، راجع للشغل).يستخدم فقاعات الحدث لكي يعلق الجميع أزرار مع معالج واحد:

formObject.onclick = function(e)
{
    e=e||event; // IE sucks
    var target = e.target||e.srcElement; // and sucks again

    // target is the element that has been clicked
    if (target && target.className=='remove') 
    {
        target.parentNode.parentNode.removeChild(target.parentNode);
        return false; // stop event from bubbling elsewhere
    }
}

+

<div>
  <input…>
  <button type=button class=remove>Remove without JS handler!</button>
</div>

Answer 2

يمكنك تجربة الاستنساخ باستخدام الطريقة الداخلية HTML، أو مزيجًا منها:

var newItem = $(item).cloneNode(false);
newItem.innerHTML = $(item).innerHTML;

أيضًا:أعتقد أن cloneNode لا يقوم باستنساخ الأحداث المسجلة في addEventListener.لكن أحداث AttachEvent الخاصة بـ IE نكون المستنسخة.ولكن قد أكون مخطئا.

Answer 3

لقد اختبرت هذا في IE7 وFF3 وعمل كما هو متوقع - يجب أن يكون هناك شيء آخر يحدث.

إليك نص الاختبار الخاص بي:

<div id="x">
    <div class="input-line" id="y">
        <input type="text">
        <a href="#" onclick="$(this).up().remove();"> Remove </a>
    </div>
</div>

<script>

$('x').appendChild($('y').cloneNode(true));
$('x').appendChild($('y').cloneNode(true));
$('x').appendChild($('y').cloneNode(true));

</script>

Answer 4

لتصحيح هذه المشكلة، أود أن أقوم بتغليف التعليمات البرمجية الخاصة بك

$(this).up().remove()

في وظيفة:

function _debugRemoveInputLine(this) {
    debugger;
    $(this).up().remove();
}

سيسمح لك هذا بمعرفة ما سيعود به $(this).إذا كان بالفعل يعيد أكثر من كائن واحد (صفوف متعددة)، فأنت بالتأكيد تعرف أين تبحث - في الكود الذي ينشئ العنصر باستخدام cloneNode.هل تقوم بأي تعديل على العنصر الناتج (أي؟تغيير سمة الهوية)؟

إذا واجهت المشكلة التي تصفها، فسأفكر في إضافة معرفات فريدة إلى عنصر التشغيل وعنصر "السطر".

Answer 5

الإجابة الأولى هي الصحيحة

يقترح بورنيل ضمنيًا الحل الأكثر تقاطعًا بين المستعرضات والإطار.

لم أختبره بعد، لكن المفهوم سيعمل في هذه المواقف الديناميكية التي تتضمن أحداثًا.

Answer 6

يبدو أنك تستخدم jQuery؟لديها طريقة لاستنساخ عنصر مع الأحداث: http://docs.jquery.com/Manipulation/clone#true

يحرر:عفوًا، أرى أنك تستخدم النموذج الأولي.