jQuery UI 可选择不使用 .dialog 打开 html答案

【问题标题】：jQuery UI Selectable Not Working With .dialog open htmljQuery UI 可选择不使用 .dialog 打开 html
【发布时间】：2011-02-02 19:31:52
【问题描述】：

我正在打开一个 .dialog 模式并加载 html。我将 jQuery selectable 应用于 html 中并显示在 .dialog 模式中的列表。 Selectable 不起作用，正在显示列表的直接 html。

代码：

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

其他细节：

我正在页面上加载 fullCalendar，当用户单击日历时，会打开带有列表的 .dialog 模式。

感谢您的任何建议。

【问题讨论】：

你确定在html完全加载后应用可选择的功能吗？
你的 selectable() 在哪里被调用？它不在您粘贴的代码中
忘了添加那行，selectable() 调用是在.dialog 打开之后，我在示例代码中添加的。

标签： jquery user-interface dialog selectable

【解决方案1】：

在实际调用可选函数之前，请务必先加载 html。

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

这是jsfiddle example

【讨论】：

好的，想通了。 Themeroller 没有为可选类创建 chrome。感谢您的帮助。

【解决方案2】：

有类似的问题，但解决方案不同。对我来说，问题在于我需要将 ui-widget-content 类添加到被认为是可选的各个元素中。相比之下，我可以只对它们调用.draggable()，它们就可以拖动而无需添加任何类。

【讨论】：