JQuery Live and Sortable

Question

Ich versuche, den Luftwiderstand zu implementieren und fallen, so kann ich Listen von Daten sortieren und die Datenbank mit den entsprechenden Positionen aktualisieren.

Ich habe ein funktionierendes Beispiel, aber wenn ich versuche, den gleichen Code auf Listen zu verwenden, die über Ajax in der Veranstaltung gebracht werden, verbindlich ist, aber keine seiner Methoden ausgelöst werden und die Elemente bleiben nicht getauscht, (Sie tauschen zurück, wenn Sie geht die Maus lassen)

hier ist mein 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>

und dann mein JavaScript sieht wie folgt aus. Ich möchte nur die interne UL getauscht werden. Dh die Listen mit dem li Data2 etc.

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

Unter Verwendung war ein Ereignis wie Doppelklick oder Klick die einzige Möglichkeit, das Ereignis bekommen konnte, überhaupt zu binden. sortierbar Mit funktionierte nicht.

Hier ist der Code ich versuchte, verwenden das Element als auch die Probe oberhalb

zu binden

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

Ich habe auch versucht, den obigen Code ohne .live () umschlungen, aber das hat nicht funktioniert.

Hier ist der Code, der die Liste vom Server geladen wird,

$(".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");
}

Anregungen oder Hinweise in der richtigen Richtung würden helfen.

Danke

Answer 1

Ok Ich habe es geschafft, es zu beheben, und ich bin nicht sicher, warum dies aufhören würde es funktioniert, aber es ist auf jeden Fall das Problem. Die Liste Ich habe versucht hatte horizontal zur Anzeige der Liste im Stylesheet auf sie links einen Schwimmer zu sortieren. Sobald ich diese Art des Update-Ereignis entfernt wurde dann ausgelöst wird.

ich jetzt gerade Display verwenden: inline, um die Liste horizontal stylen. Ich hoffe, das jemand hilft, weil es meine Stunden in Anspruch nahm, es zu trainieren.

Danke für die Hilfe. Ben

Answer 2

[Update]

Ändern Sie Ihre AJAX Callback-Linie von $("#form").html(data); folgt aus:

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

Und Ihre ursprüngliche sortable() Befehl ändern (was ich anderswo gehe davon aus), so etwas wie folgt aus:

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

Das Wichtigste ist dafür, dass originalOptions für den Einsatz in Ihrer showList Funktion zur Verfügung steht.

[ursprüngliche Antwort]

Sie müssen nur refresh verwenden, wenn die Liste aktualisiert wird. So können sagen Sie diesen $.post Code haben:

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

Dies ändert den alten li Artikel für die neuen, und der refresh sollte die neuen Elemente neu binden und akzeptieren.