1

jQuery Mobile を使用してボタンを強化する、最後に示したコードを考えてみましょう。

ページが読み込まれると、最初のボタン (元のボタン) が表示されます。 ここに画像の説明を入力

黄色のボックスをクリックすると、2 番目のボタン (挿入されたボタン) が挿入されます。 ここに画像の説明を入力

ここでの問題は、挿入されたボタンが CSS スタイルに追いつかないことです。このシナリオは、AJAX を使用する場合に非常に一般的です (jQuery Mobile に固有のものではありません) が、この問題の解決策や回避策を見つけることができませんでした。

挿入されたボタンを CSS スタイルで強化するにはどうすればよいですか?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>title</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>          

        <script type="text/javascript">
            function insert(){
                $("#result").html('<input type="button" value="Inserted button"/>');
            }
        </script>

    </head>
    <body>
        <form>

            <p class="ui-body-e ui-corner-all" style="padding:5px" onclick="insert()">Click here to insert the button</p>

            <input type="button" value="Original button" />

            <div id="result">
                Button not inserted yet  
            </div>

        </form>
    </body>
</html>
4

2 に答える 2

2

ボタンの html を挿入した後:

$("#result").html('<input type="button" value="Inserted button"/>');

そのコンテナを呼び出して、そのコンテンツで jQuery-mobile レンダラーを呼び出すことができる.trigger('create')ため、行は次のようになります。

$("#result").html('<input type="button" value="Inserted button"/>').trigger('create');
于 2012-08-27T14:45:43.763 に答える
2

jQuery モバイルは、追加の要素/クラスをオブジェクトに追加します。これは、ページの読み込み時に発生します。

追加のボタンやその他のオブジェクト (リストなど) を挿入すると、スタイルを再度適用する必要があります。

この場合、ボタンを挿入した後に使用します$(_selector_for_new_button_).button();

jQuery モバイルは、適切なボタン スタイルを適用します。

于 2012-08-27T14:43:50.810 に答える