Añadir elementos a una jQuery acordeón con jQuery

Question

Estoy usando el plugin de acordeón jQuery para hacer un acordeón de algunos datos. Entonces quiero que el usuario sea capaz de añadir más datos al acordeón. He fijado el acordeón para funcionar correctamente, entonces yo he hecho una función que antepone un "elemento de la lista" para el acordeón que coincide con la semántica de acordeón.

¿Es posible "actualizar" el acordeón para que funcione con el elemento recién añadido, sin guardar los nuevos datos en la base de datos y actualizar la página?

Algo como esto:

.accordion('refresh')

O algo así como el evento en vivo añadido en jQuery 1.3, nadie tiene una pista?

Answer 1

Yo no lo he probado, pero esto probablemente debería funcionar: Decir que usted tiene su acordeón con #accordion id

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

Básicamente, simplemente destruir y volver a crear el acordeón.

ACTUALIZACIÓN:

Dado que esta respuesta fue escrito un método de actualización () se ha añadido al widget de acordeón. Se puede invocar llamando a:

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

Puede leer más acerca de este método aquí

Answer 2

Para añadir una nueva sección, y mantener el antiguo activa:

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

Como se mencionó anteriormente por Shahzad, jQuery UI 1.10 ha hecho esto más fácil; ver la documentación .

Answer 4

Es posible que desee ver en el plugin livequery: http://plugins.jquery.com/project / livequery

Se le permite añadir eventos y vinculante después de cargar el DOM.

Answer 5

Ya que necesitaba un trabajo añadir / editar / borrar elementos vor acordeón Pirateé este pequeño funciones javascript para este fin

http://jsfiddle.net/Sd6fC/

H3 y div necesitan un identificador único que se conoce con la siguiente convención

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

div correspondiente necesita lo siguiente

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

muestra acordeón bloque de código

<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>

divertirse tal vez ayuda a algunas PPL por ahí!