Liaison des éléments lors du chargement de la fenêtre modale à partir d'AJAX (jQuery)

Question

Je souhaite créer une liste glisser-déposer dans une fenêtre modale. Le contenu de la fenêtre est chargé via un appel AJAX, donc je crois que j'ai besoin d'utiliser la méthode .live() de jQuery.

Voici mon code actuel:

$('#cboxLoadedContent').live('load', function() { 
    // Event for sortable page lists 
    $('ul#pageList').sortable(); 
}); 

Comment puis-je mettre en place des liaisons lors du chargement de la fenêtre modale? La fenêtre modale provient du plugin colorbox.

Remarque: Je suppose que 'load' n'est pas le bon événement à utiliser, car si j'y ajoute un simple alert(), il n'apparaît même pas lorsque la fenêtre se charge.

Answer 1

Dans votre cas, il suffit d'appeler .sortable() sur les éléments lorsque vous les charger via ajax, comme ceci:

$.ajax({ 
    url: 'page.html', 
    //stuff... 
    success: function(data) { 
    //Put stuff in DOM 
    $('ul#pageList').sortable(); 
    } 
}); 

Pour la pourquoi partie: .live() ne fonctionne pas de cette façon, il doesn N'attendez pas de nouveaux éléments et faites des choses ... il écoute les événements des éléments qui survolent le DOM puis exécute les gestionnaires d'événements s'il a un sélecteur qui correspond.

Answer 2

Cela dépend de la fenêtre modale que vous utilisez. Si vous utilisez jQuery UI dialog, vous pouvez utiliser l'événement opendialog.

Vous pouvez ainsi lier une fonction à cet événement qui est déclenché lorsque la boîte de dialogue est ouverte.

$(".selector").bind("dialogopen", function(event, ui) { 
    ... 
}); 

Si vous n'utilisez pas l'interface utilisateur jQuery, vous devez aller au code et regarder si un événement est déclenché lorsque la fenêtre ouvre.