jQuery UI sélectionnable ne fonctionne pas avec .dialog open html

Question

J'ouvre un modal .dialog et je charge du code HTML.J'applique jQuery sélectionnable à une liste qui est dans le html et affichée dans le modal .dialog.Selectable ne fonctionne pas, le code HTML de la liste est affiché.

Code:

  $jQuery('#calendar').fullCalendar({
       ...
       dayClick:

       ...


         var $test_dialog = jQuery('<div></div>').html('<ul id="selectable">
           <li>1</li>
           <li>2</li>
           <li>3</li>
        </ul>').dialog(//buttons);

    }) // end fullCalendar

    $test_dialog.dialog('open')

    jQuery('#selectable').selectable(); 

Autres détails:

Je charge fullCalendar sur une page et lorsque l'utilisateur clique sur le calendrier, le modal .dialog avec la liste s'ouvre.

Merci pour vos suggestions.

Answer 1

Assurez-vous toujours d'avoir chargé le code HTML avant d'appeler réellement la fonction sélectionnable.

$(function() {
  var html = '';
  html += '<ul id="selectable">';
  html += '<li>1</li>';
  html += '<li>2</li>';
  html += '<li>3</li>';
  html += '</ul>';
  $('#dialog').html(html).dialog();
  $('#selectable').selectable();
});

voici un exemple jsfiddle

Answer 2

Il y avait un problème similaire mais une solution différente.Pour moi, le problème était de reconnaître que je devais ajouter la classe ui-widget-content aux éléments individuels qui devaient être considérés comme sélectionnables.En revanche, je pourrais simplement appeler .draggable() sur eux et ils sont devenus déplaçables sans ajouter de classes.