如何插入一個新元素，以便它以正確的樣式顯示（使用jQuery）

我是一般的編程新手，所以我的問題可能很容易回答，甚至是愚蠢的，但在這裏我去：如何插入一個新元素，以便它以正確的樣式顯示（使用jQuery）

在我的站點中添加新的按鈕（或任何元素）時，此按鈕不會以正確的樣式顯示。我究竟做錯了什麼？

代碼：

<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Test</title> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
<link rel="stylesheet" href="/resources/demos/style.css" /> 

<script> 
$(function() { 
$("#accordion").accordion(); 
}); 

$(function() { 
$("button") 
.button() 
.click(function() { 
$('#panel').append("<button>OK?</button>"); 
}); 
}); 
</script> 

</head> 
    <body> 
    <button>Go!</button> 
    <div id="accordion"> 
     <h3>Heading 1</h3> 
     <div> 
      <p id="panel"> 
     Text 
      </p> 
     </div>     
    </div> 
    </body> 
</html>

來源

2013-01-17 dummkind

你是什麼意思的「這個按鈕不顯示在正確的風格」？ – billyonecan

不幸的是，我們無法嗅探「/resources/demos/style.css」。顯示你的風格 – schellmax

對不起，我試圖更加精確：第一個按鈕（'Go！'）顯示爲一個jQuery-UI風格的按鈕...另一個按鈕（'OK？'）點擊第一個，只是看起來像一個沒有任何樣式的'普通'html按鈕。我希望能更好地解釋我的問題。 – dummkind

你追加按鈕OK後，試試這個代碼：

$('#panel').append("<button>OK?</button>"); 
$("#panel button").button();

來源

2013-01-17 08:28:03 Rajiv007

Thx爲快速答案，但沒有幫助。第二個按鈕仍然顯示錯誤... – dummkind

它應該。你把它放在哪裏？ – JNDPNT

$（'＃panel'）後我試過了。append（「」）; .... – dummkind

我測試您的問題。這兩種不同按鈕樣式的原因是線

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />

您在哪裏導入jquery-ui.css樣式。這實際上是一個按鈕在頁面中的位置，並以不同的方式進行設計。由於第二個按鈕（'OK？'）正在使用面板，因此它會收到不同的樣式。

你可以嘗試你的例子，上面的行註釋掉 - 它仍然可以工作（沒有造型），兩個按鈕看起來完全一樣。

所以這真的是不是一個jQuery問題，但只有一個問題與CSS樣式。如果你想進一步深入，我建議你看看你的頁面在Chrome JS控制檯或Firefox Firebug。兩者都會告訴你爲什麼頁面上的每個元素都看起來完全如此，即他們會告訴你按鈕樣式是來自jquery-ui.css還是style.css。

注意，我明明不得不/resources/demos/style.css進不去所以我刪除該行對我的測試。我的進一步建議是檢查您導入的兩種樣式以用於競爭樣式定義，例如一種風格說按鈕應該是這樣的樣式，而另一種則說不同的東西。

來源

2013-01-17 08:45:46 fgysin

沒錯，確實如此。但我希望2個按鈕在jQuery-UI樣式中查看，而不是以標準的html方式查看，因此註釋掉該行將無法實現。但thx再次爲快速答案;） – dummkind

我沒有太多的jQuery UI的經驗，但我認爲你應該添加正確的樣式類的元素爲jQuery UI適當的樣式。如果您向添加的按鈕添加'class =「ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only」'，它將顯示正確的樣式。但我承認，這可能不是正確的做法。 – fgysin

這個解決方案的工作原理，你是對的，但我正在尋找另一種解決方案。無論如何。 – dummkind

它可能不是正確的解決方案，但我可以建議一種解決方法。檢查什麼類jquery他們ui添加到'轉到'按鈕，並附加'確定'按鈕，將這些類添加到確定按鈕

這樣的事情。

$('#panel').append("<button class="jquery ui theme button classes">OK?</button>");

來源

2013-01-17 09:04:04

這可行，但不是我正在尋找的解決方案，無論如何;） – dummkind

如何插入一個新元素，以便它以正確的樣式顯示（使用jQuery）

回答

相關問題