無法獲得JQuery UI可選擇工作在所有

我一直有一些麻煩讓JQuery UI可選與我的網站一起工作。我對編碼還很陌生，我不確定自己做錯了什麼。我已經搜索了相關的問題，並沒有找到任何讓我知道的問題。無法獲得JQuery UI可選擇工作在所有

我想創造什麼本質上是一個工作的榮耀標籤製造商，並希望能夠使用鼠標「套索」在網格中選擇單元格。但由於某種原因，我無法選擇工作。

這裏是JS：

$('document').ready(function() { 

     for (i=0; i<117;i++) { 
       $('#plateActual').append('<div class="cell"/>'); 
       } 

       $('#plateActual').selectable(); 
     });

下面是HTML：

<!DOCTYPE html> 
<html> 
     <head> 
        <title></title> 
        <link rel="stylesheet" href="style.css" /> 
        <link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" /> 
        <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script> 
        <script type="text/javascript" src="script.js"></script> 
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 

     </head> 

     <body> 
     <div id="wrapper"> 

       <div id="navbar">  
       </div> 
       <div id="controlPanel"> 
       <p>test<br>test<br>test<br>test<br>test<br>test<br></p> 
       <p>test<br>test<br>test<br>test<br>test<br>test<br></p> 
       <p>test<br>test<br>test<br>test<br>test<br>test<br></p> 
       <p>test<br>test<br>test<br>test<br>test<br>test<br></p> 
       <p>test<br>test<br>test<br>test<br>test<br>test<br></p> 
       <p>test<br>test<br>test<br>test<br>test<br>test<br></p> 

       </div> 
       <div id="plateEditor"> 
          <div id="plateActual"> 

          </div> 

       </div> 
       <div id="bottom"> 
       </div> 
     </div> 

     <script type="text/javascript" src="script.js"></script> 
     <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script> 
     <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 

     </body>

這裏是CSS：

body { 
     margin: 0px auto; 
     padding: 0; 
} 


p  { 
     color: yellow; 
} 

#wrapper { 
       border: 1px dotted black; 
       width: 980px; 
       margin: 0px auto; 
       padding: 0; 
} 

#navbar { 
      width: 980px; 
      background: black; 
      height: 50px; 
      position: fixed; 
      margin: 0; 
      padding: 0; 
      top: -10px; 
} 

#controlPanel  { 

           width: 250px; 
           background-color: red; 
           float:left; 
           top: 100px;  
           margin-bottom: 0; 

} 

#plateEditor    { 
           position: relative; 
           overflow: auto; 
           width: 730px; 
           float:right; 
           top: 100px; 
           margin-bottom: 0; 
           margin-top: 150px; 
} 

#plateActual    { 
           border: 1px solid; 
           width: 403px; 
           height: 279px; 
           margin: 0px auto; 
           pading: 0; 
} 

#bottom      { 
           width: 980px; 
           height: 30px; 
           background:green; 
           clear: both; 
           bottom: 0; 
           margin: 0px auto; 
           padding: 0; 
} 

.cell       { 
           float: left; 
           width: 29px; 
           height: 29px; 
           border: 1px dotted; 

}

我道歉，如果我的代碼是凌亂和無組織。我仍然在思考如何最好地保持它的組織性，並且通常以可接受的方式編寫它。非常感謝你的幫助。

更新：我已經改變了安藤的建議，但我仍然無法讓選擇工作。我已經嘗試將#plateActual更改爲ol或ul並添加li.cell，但這也不起作用。

我想知道是不是因爲我的CSS是干擾它，但我不知道如何解決這個問題，而不會破壞格式。

來源

2012-07-22 Copacetik

append返回的元素將是執行添加的元素 - 在您的案例中plateActual - 因此您將cell類添加到錯誤的元素。

當你追加細胞 - 使用$('<div/>') - 這將轉化爲「從DOM得到'<div/>'類型的元素並將其移動我的‘plateActual’元素裏」 - 你應該爲你創建一個元素添加無$那還不存在。

像這樣的東西應該工作（http://jsfiddle.net/k3YJY/）：

for (var i=0; i<5;i++) {       
      $('#plateActual').append('<div class="cell"/>');           
}

來源

2012-07-22 05:54:23 Ando

非常感謝。這似乎是創建div的更明智的方式。不幸的是，我仍然無法選擇工作，而且我在這方面還沒有取得任何進展。 – Copacetik 2012-07-22 13:17:40

什麼不工作？你調試過嗎？也許你有錯誤 - 用firebug或內置的chrome/opera調試器查看。 – Ando 2012-07-22 19:10:48

無法獲得JQuery UI可選擇工作在所有

回答

相關問題