Adicionar itens a uma jQuery acordeão com jquery

Question

Eu estou usando o jQuery acordeão plugin para fazer um acordeão de alguns dados. Então eu quero que o usuário seja capaz de adicionar mais dados para o accordian. Eu tenho a configuração do acordeão para funcionar corretamente, então eu fiz uma função que prepends um "item de lista" para o acordeão que corresponde a semântica acordeão.

É possível "atualizar" o acordeão para que ele funcione com o elemento recém-adicionado, sem salvar os novos dados para banco de dados e atualizar a página?

Algo parecido com isto:

.accordion('refresh')

Ou algo como o evento ao vivo adicionado em jQuery 1.3, ninguém obteve um indício?

Answer 1

Eu não testei, mas isso provavelmente deve funcionar: Dizer que você tem o seu acordeão com id #accordion

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

Basicamente, apenas destruir e recriar o acordeão.

UPDATE:

Uma vez que esta resposta foi escrito um método refresh () foi adicionado ao widget acordeão. Ele pode ser chamado pelo telefone:

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

Você pode ler mais sobre este método aqui

Answer 2

Para adicionar uma nova seção, e manter o antigo ativo:

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 mencionado acima por Shahzad, jQuery UI 1.10 tem feito isso mais fácil; consulte a documentação .

Answer 4

Você pode querer olhar para o plugin LiveQuery: http://plugins.jquery.com/project / livequery

Ele permite que você adicione eventos e vinculativa após o DOM é carregado.

Answer 5

Uma vez que eu precisava de um / editar / itens vor acordeão exclusão add trabalho eu cortei este pequeno funções JavaScript para este fim

http://jsfiddle.net/Sd6fC/

h3 e div precisa de um ID único, que passa a seguinte convenção

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

a necessidade div correspondente a seguinte

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

bloco de código acordeão amostra

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

se divertir talvez ajude alguns ppl lá fora!