2

私は一般的にプログラミングにかなり慣れていないので、私の質問は答えるのが簡単かもしれませんし、ばかげているかもしれませんが、ここに行きます：

新しいボタン（または任意の要素）をサイトに追加すると、このボタンが正しいスタイルで表示されません。私は何が間違っているのですか？

コード：

<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>
4

3 に答える 3

0

[OK]ボタンを追加した後、このコードを試してください。

 $('#panel').append("<button>OK?</button>");
 $( "#panel button" ).button();
于 2013-01-17T08:28:03.083 に答える
0

私はあなたの問題をテストしました。2つの異なるボタンスタイルの理由はラインです

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

ここで、jquery-ui.cssスタイルをインポートします。これは実際にはボタンがページのどこにあるかを見て、それらのスタイルを変えます。2番目のボタン（「OK？」）はパネルを使用しているため、別のスタイルを受け取ります。

上記の行をコメントアウトして例を試すことができます-それは（スタイリングなしで）引き続き機能し、2つのボタンはまったく同じに見えます。

したがって、これは実際にはjQueryの問題ではなく、 CSSスタイルの問題にすぎません。これについてさらに詳しく知りたい場合は、 ChromeJSコンソールまたはFirefoxFirebugのいずれかでページを確認することをお勧めします。どちらも、ページ上の各要素が正確に表示される理由を示します。つまり、ボタンのスタイルがjquery-ui.cssまたはから来ているかどうかを示しますstyle.css。

明らかにアクセスできなかった /resources/demos/style.css ので、テストのためにその行を削除したことに注意してください。私からのさらなる提案は、競合するスタイル定義についてインポートする2つのスタイルを確認することです。たとえば、一方のスタイルはボタンをこのようにスタイル設定する必要があることを示し、もう一方のスタイルは別のスタイルを示すことを示します。

于 2013-01-17T08:45:46.507 に答える
0

これは正しい解決策ではないかもしれませんが、回避策を提案することができます。uiが[Go]ボタンに追加するクラスを挿入し、[OK]ボタンを追加しながら、それらのクラスを[OK]ボタンに追加します

このようなもの。

$('#panel').append("<button class="jquery ui theme button classes">OK?</button>");
于 2013-01-17T09:04:04.987 に答える