追加jQuery UI的对话框其父

Question

我有以下的html：

<ul id="sortable"> 
<li class="ui-state-default">1 
    <div class="dialog-modal" title="Animal Facts" style="display:none;"> 
    <p>What is the fastest animal on Earth?</p> 
    </div> 
    </li> 
<li class="ui-state-default">2 
<div class="dialog-modal" title="Animal Facts" style="display:none;"> 
<p>What is the largest animal on Earth?</p> 
</div></li> 

和下面的jQuery代码：

$(".dialog-modal").dialog({ 
     autoOpen: false, 
     height: 300, 
     width: 350, 
     modal: true 
     }); 

$('.ui-state-default').click(function() { 
    $(this).find("div").dialog("open"); 
}); 

这不打开点击模态对话框，我算什么我错过了？

感谢您的帮助。

Answer 1

这是jQuery UI对话框的当前行为。

定义了jQuery UI对话框被创建并附加到主体。

解决方法解决方案就像是在创建之后的对话框附加到其原来的母公司：

$(function() { 
    $(".dialog-modal").each(function (index) { 

     var origContainer = $(this).parent(); 

     $(this).dialog({ 
      autoOpen: false, 
      height: 300, 
      width: 350, 
      modal: true, 
      create: function() { 
       $(this).closest('div.ui-dialog') 
        .click(function (e) { 
        e.stopPropagation(); 
       }); 
      } 
     }).parent().appendTo(origContainer); 
    }); 

    $('.ui-state-default').click(function (event) { 
     $(this).find("div").find(".dialog-modal").dialog("open"); 
    }); 
}); 

重要提示：看定义的create事件;这是必要的，因为在对话框内的每次点击都触发在类别元素点击上执行的打开对话框方法！这是正式的正确，因为现在对话框包含在父对象中，点击传播给父类.ui-state-default类。随着stopPropagation问题解决。

这有点冒失，但它的工作原理。

工作小提琴：http://jsfiddle.net/IrvinDominin/Avtg9/8/

使用jQuery UI 1.10.0的未来版本将添加的选项appendTo，处理这种情况，没有任何解决办法http://api.jqueryui.com/dialog/#option-appendTo