2

スタックオーバーフローの皆さん、こんにちは！

最新の jquery mobile (1.2.0) を使用してモバイル Web サイトを作成しています。フォームがあり、クリック時に送信ボタンのテキスト/値を変更したい。空の HTML ページで動作するコードがあります。

<body>
    <form method="get" action="/show.php?" target="showframe">
        <select name="week">
            <option value="1">Week</option>
        </select>
        <select name="id">
            <option value="1">ID</option>
        </select>
        <input type="hidden" name="type" value="2">
        <input type="submit" value="Load" id="show" onclick="javascript:document.getElementById('show').value='Refresh'"> 
    </form>
    <iframe id="showframe" width="100%" height="1000px" frameborder="0" scrolling="no" sandbox="allow-forms"></iframe>
<body>

しかし、jquery ページで submut ボタンをコピー アンド ペーストしても、値は変わりません。私の質問は、jquery モバイルでこれを機能させるにはどうすればよいですか? 代替手段は何ですか？

前もって感謝します

編集：

私はjivingsの答えを試しましたが、これはそれです:

<html>

<head>
    <title>Infoweb Mobiel - Dominicus College</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
    <link rel="stylesheet" href="css/layout.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.mobile-1.2.0.min.js"></script>
    <script src="js/style.js"></script>
    <script>
        $("#show").click(function () {
            $(this).val('Refresh');
        });
    </script>
</head>

<body>
    <form method="get" action="/show.php?" target="showframe">
        <select name="week">
            <option value="1">Week</option>
        </select>
        <select name="id">
            <option value="1">ID</option>
        </select>
        <input type="hidden" name="type" value="2">
        <input type="submit" value="Load" id="show" $("#show").button("refresh");> 
    </form>
    <iframe id="showframe" width="100%" height="1000px" frameborder="0" scrolling="no" sandbox="allow-forms"></iframe>
<body>

しかし、それはうまくいきません..何か間違ったことをしていると思います。どこにどのように配置すればよい$("#show").button("refresh");ですか？

4

2 に答える 2

0

まず、jQueryMobileについていくつか理解する必要があります。

  • EDIT部分で行ったことは間違っていました。HTMLブロックで$（ "＃show"）。button（ "refresh"）を使用することはできません。JavaスクリプトをそのようなHTMLと混合することはできません。

  • これは、これがどのように機能するかの例です：http: //jsfiddle.net/Gajotres/K8nMX/。

コード：

    $('#index').live('pagebeforeshow',function(e,data){    
        $(document).on('click', '#show', function(){
            $('#show').attr('value','Show');
            $('#show').button("refresh");
            $('#custom-form').submit();
        });    
    });

私の例のインデックスの場合、jQueryMobileページのIDです。Pagebeforeshowは、ページを表示する前にトリガーされるイベントです。

    $('#index').live('pagebeforeshow',function(e,data){

ボタンの種類がボタンに変更されました。理由は、フォームがphpサーバーにデータを送信している間はボタンのテキスト（またはその他）を変更できないためです。

    <input type="button" value="Load" id="show">

これが、クリックイベントをこの行のボタンにバインドしている理由です。

    $(document).on('click', '#show', function(){

次の行では、ボタンのテキストを変更しています。

    <input type="button" value="Load" id="show">

これはjQueryMobileスタイルのボタンであるため、新しいスタイルを適用できるように更新する必要があります。

    $('#show').button("refresh");

最後に、フォームの送信をトリガーします。

    $('#show').button("refresh");

続行する前に、次の記事をお読みください：http: //jquerymobile.com/test/docs/api/events.html。ここには、jQueryMobileページイベントについて知っておく必要のあるすべてのものがあります。

jQuery Mobileページの構造に関する次の記事もお読みください：http：//jquerymobile.com/test/docs/pages/page-anatomy.html

このページを初めて使用する場合は、この記事を参照してください。将来、より良い応答を得るのに役立ちます。これがあなたの質問に対する答えであったことを願っています。他にご不明な点がございましたら、お気軽にコメントを残してください。

于 2012-12-22T16:36:53.793 に答える
0

これは、表示されているテキストが実際にはボタン要素の一部ではないためです。JQuery Mobile は、独自の要素でボタンをパディングして、表示されるスタイルを作成します。refresh()変更を加えたときにこれらの要素を更新する場合は、ボタンでメソッドを呼び出す必要があります。

$("#show").button("refresh");

また、これは jQuery であるため、適切にハンドラーを使用する必要があります。headonclick は、または外部ファイル内の残りの JavaScript ロジックと共にある必要があり、次のようになります。

$("#show").click(function() {
   $(this).val('Refresh');
});
于 2012-12-22T09:59:45.357 に答える