إضافة عناصر إلى jQuery الأكورديون مع jQuery

Question

أنا أستخدم البرنامج المساعد JQuery Colfricion لإتاحة بعض البيانات. ثم أريد أن يكون المستخدم قادرا على إضافة المزيد من البيانات إلى الجهاز الجامعي. لقد قمت بإعداد الأكورديون للعمل بشكل صحيح، ثم قمت بإعداد وظيفة تقوم بإعداد "عنصر القائمة" إلى الأكورديون الذي يطابق معدل الأكورديون.

هل من الممكن "تحديث" الأكورديون بحيث يعمل مع العنصر المضافة حديثا، دون حفظ البيانات الجديدة إلى قاعدة البيانات وتحديث الصفحة؟

شيء من هذا القبيل:

.accordion('refresh')

أو شيء مثل الحدث الحي المضافة في JQuery 1.3، أي شخص لديه فكرة؟

Answer 1

لم أختبرها، ولكن هذا يجب أن يعمل على الأرجح: قل أنه لديك الأكورديون مع ID #Accordion

$('#accordion').append('<h3><a href="#">New Paragraph</a></h3><div><p>New data</p></div>')
    .accordion('destroy').accordion();

أساسا، فقط تدمير وإعادة إنشاء الأكورديون.

تحديث:

نظرا لأن هذه الإجابة قد كتبت طريقة تحديث () قد تمت إضافتها إلى القطعة الأكورديون. يمكن استدعاءها عن طريق الاتصال:

$( ".selector" ).accordion( "refresh" );

يمكنك قراءة المزيد عن هذه الطريقة هنا

Answer 2

لإضافة قسم جديد، والحفاظ على القديم نشيط:

var active = $('#accordion').accordion('option', 'active');
$('#accordion').append('<h3><a href="#">New Paragraph</a></h3><div><p>New data</p></div>')
    .accordion('destroy').accordion({ active: active});

Answer 3

كما ذكرنا أعلاه من قبل شهزاد، جعل جيعيري واجهة المستخدم 1.10 هذا أسهل؛ يرى وثائق.

Answer 4

قد ترغب في إلقاء نظرة على البرنامج المساعد LiveQuery: http:/plugins.jquery.com/project/livequery.

يسمح لك بإضافة الأحداث والربط بعد تحميل DOM.

Answer 5

منذ أن احتاجت عناصر إضافة / تحرير / حذف Vor Collection، اخترقت هذه الوظائف القليلة JavaScript لهذا الغرض

http://jsfiddle.net/sd6fc/

H3 و DIV تحتاج إلى معرف فريد يمر بالاتفاقية التالية

<h3 id="divname_hitm_<uniquenumber>"><h3>

الحملة المقابلة تحتاج ما يلي

<div id="divname_ditm_<samenumber as h3"></div>

نموذج كتلة كود الأكورديون

<div id="divname">
    <h3 id="divname_hitm_1><a href="#">Section 1</h3>
    <div id="divname_ditm_1>
        <p>Section 1 Payload</p>
    </div>
    <h3 id="divname_hitm_2><a href="#">Section 2</h3>
    <div id="divname_ditm_2>
        <p>Section 2 Payload</p>
    </div>
</div>

استمتع ربما يساعد بعض شركته تنوي هناك!