ダイナミックに作成されたdivのサイズ変更可能なグリップアイコンがありません

Question

動的に作成されたdivのサイズ変更可能なui機能を試しているhtmlページがあります。このページは、ローカルディレクトリにあるときに正しく表示され、IE File> Openによってアクセスされます。ファイルをWebサーバーに転送し、http://localhost/file.htmlでアクセスするとサイズ変更可能なグリップアイコンは表示されません。また、適用されないCSSスタイルもあります。

div要素が

 var index = getCookie("divindex"); 
     if (index == "" || index == null) index = 1; 
     var divid = "compage"+index; 
     $("#page").append('<div id="'+divid+'" class="comdiv ui-widget-content"></div>'); 
     $('#'+divid).append('<p class="comhdr editableText ui-widget-header">Sample'+index+'</p>'); 
     $('#'+divid).css('top',50); 
     $('#'+divid).css('left',50); 
     $('#'+divid).css('width',150); 
     $('#'+divid).css('height',150); 
     $('#'+divid).resizable(); 
     $('#'+divid).draggable(); 
     $('#'+divid).draggable("option", "handle", '.comhdr'); 
     $('#'+divid+' p').editableText(); 

を定義しているこれは、静的divのために起こります。ファイル内

<div id="editdiv" class="comdiv ui-widget-content" style="position: absolute; top: 150px; left: 850px; width:350px; 

height:250px; border:1px solid grey;"> 
    <p id="heading" class="comhdr editableText ui-widget-header">Editable</p> 
</div> 

ライブラリは

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.js"></script> 
<link rel="stylesheet" href="ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/themes/base/jquery-ui.css"> 

<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css"> 
<style> 
.comdiv { position:absolute; padding: 0.5em; border: 1px solid black} 
.comhdr { text-align: center; margin: 0; cursor:move; font: 14px bold Georgia; border 1px solid grey; background: grey;} 
</style> 
<script> 
$(function() { 
    $("#editdiv").resizable(); 
    $("#editdiv").draggable(); 
    $("#editdiv").draggable("option", "handle", '#heading'); 
}); 
</script> 

なぜ行動は、ローカルファイルとWebサーバの間で異なるだろうしていますか？

http://jsbin.com/awosup

Answer 1

私は私のウェブサーバーにjqueryの/ jqueryの-UIのコピーをダウンロードする場合、これは問題を修正します。 http://jqueryui.com/downloadから安定版1.8.15のUI明度テーマをダウンロードしました。

Answer 2

サイズ変更可能なグリップが適用されていない他のスタイルとともに表示されないという問題もありました。私の場合、いくつかのjquery-uiスタイルをオーバーライドするCSSが定義されていることがわかりました。あなたはそのようなことを見ることができます。 Firebugで私の場合、「.ui-icon-gripsmall-diagonal-se」と「.ui-icon」クラスのスタイル定義よりも重く重かったdivタグの背景を定義しました。

私はではありません私のWebサーバー上にjqueryのローカルコピーをインストールする必要があります。 CDNのバージョンは正常に動作します。