JQuery live e ordinabile

Question

Sto cercando di implementare il trascinamento della selezione in modo da poter ordinare elenchi di dati e aggiornare il database con le posizioni pertinenti.

Ho un esempio funzionante ma quando provo a utilizzare lo stesso codice su elenchi introdotti tramite ajax l'evento è vincolante ma nessuno dei suoi metodi viene attivato e gli elementi non rimangono scambiati (si scambiano di nuovo quando lasci andare il topo)

ecco il mio HTML

<ul class='sortable'>
    <li>
        <ul>
            <li>Data</li>
            <li>Data2</li>
        </ul>
   </li>
   <li>
        <ul>
            <li>Data3</li>
            <li>Data4</li>
        </ul>
   </li>
</ul>

e poi il mio JavaScript assomiglia a questo.Voglio solo che gli UL interni vengano scambiati.Cioè le liste contenenti li Data2 ecc.

$(document).ready(function()
{
    //$(".sortable").disableSelection();
    $(".sortable").live("dblclick", function()
    {
        $(".sortable").sortable({
            update : function()
            {
                alert("update");
            }
        });
    });
});

L'utilizzo di un evento come il doppio clic o il clic era l'unico modo in cui potevo vincolare l'evento.L'uso di sortable non ha funzionato.

Ecco il codice che ho utilizzato per provare ad associare l'elemento così come l'esempio sopra

$(document).ready(function()
{
    $(".sortable").live("sortable", function()
    {
        $(".sortable").sortable({
            update : function()
            {
                alert("update");
            }
        });
    });
});

Ho anche provato il codice precedente senza .live() avvolto, ma neanche questo ha funzionato.

Ecco il codice che carica l'elenco dal server,

$(".myLink").live("click", function()
{
    var id   = $(this).attr("id");
    var url = base_url + "admin/controller/function/" + id;

    showList(url);

    return false;
});


//loads data into the form div
function showList(url)
{
    var arr = new Array();
    $.post(url, arr, function(data)
    {
        $("#form").html(data);

    }, "text");
}

Qualsiasi suggerimento o indicazione nella giusta direzione sarebbe di aiuto.

Grazie

Answer 1

Ok, sono riuscito a risolverlo e non sono sicuro del motivo per cui questo potrebbe impedirne il funzionamento, ma è sicuramente questo il problema.L'elenco che stavo cercando di ordinare aveva un float lasciato nel foglio di stile per visualizzare l'elenco in orizzontale.Una volta rimosso questo stile, è stato attivato l'evento di aggiornamento.

Ora utilizzo solo display:inline per definire lo stile dell'elenco in senso orizzontale.Spero che questo aiuti qualcuno perché ci sono volute ore per risolverlo.

Grazie per l'aiuto.Ben

Answer 2

[aggiornamento]

Cambia la tua linea di richiamata AJAX da $("#form").html(data); a questa:

$("#form").html(data).find('.sortable').sortable(originalOptions);

E cambia il tuo originale sortable() comando (che presumo sia altrove) a qualcosa del genere:

var originalOptions = { update: function(){ alert('click');}  };
$(".sortable").sortable( originalOptions );

L'importante è accertarsene originalOptions è disponibile per l'uso nel tuo showList funzione.

[risposta originale]

Hai solo bisogno di usare refresh quando l'elenco viene aggiornato.Quindi diciamo che hai questo $.post codice:

$.post('/url', { new_positions: whatever }, function(data){
  // data = a bunch of 'lis' but no 'ul'
  $('.sortable').html(data).sortable('refresh');
}, 'html');

Questo cambia il vecchio li elementi per quelli nuovi e il refresh dovrebbe ricollegarsi e accettare i nuovi elementi.