2

[開始] ボタンと [リセット] ボタンは、入力フィールドのテキストの変更をトリガーします。
jquery.mobile-1.3.0.min.js をインポートすると
、イベントへのボタンが再トリガーされるようにページをリロードする必要があります。

Jquery-1.8.2 を使用するだけで完全に機能します。

Jquery モバイル UI で必要なリロードを停止するにはどうすればよいですか?

Firefox 19.02 を使用しています。

    <!DOCTYPE html>   
<html>   
    <head>    
    <meta name="viewport" content="width=device-width, initial-scale=1">   

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />  
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>  
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>  

</head>   

<body>   

<form id='testform' action="#">  
    <fieldset>  
        <label for="timer">  
            <span>Event triggered</span>  
            <input type='text' name='triggered'>  
        </label>  
    </fieldset>  
    <fieldset>  
     <input value="Start" type="submit">  
     <input value="Reset" type="reset">  
     </fieldset>  
</form>  
<script type="text/javascript">  

//bind a submit handler to the sample form  
document.getElementById('testform').onsubmit = function()  
{  
   $("input[name='triggered']").val("Start button clicked.");  

    // cancel the normal submit  
    return false;  
};  

document.getElementById('testform').onreset = function()  
{  
    $("input[name='triggered']").val("Reset clicked.");  

    //cancel the normal rest  
    return false;  
};  

</script>  
</body>  
</html>
4

2 に答える 2

2

動作中の jsFiddle の例: http://jsfiddle.net/Gajotres/GjU8e/

<!DOCTYPE html>   
<html>   
    <head>    
    <meta name="viewport" content="width=device-width, initial-scale=1"/>   
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />  
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>  
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>  

</head>   

<body>   
    <div data-role="page" id="index">
        <form id='testform' action="#" data-ajax="false">  
            <fieldset>  
                <label for="timer">  
                    <span>Event triggered</span>  
                    <input type='text' name='triggered'/>  
                </label>  
            </fieldset>  
            <fieldset>  
                <input value="Start" type="submit"/>  
                <input value="Reset" type="reset"/>  
             </fieldset>  
        </form>  
    </div>        
<script type="text/javascript">  

// bind submit and reset event before page is shown 
$(document).on('pagebeforeshow', '#index', function(){ 
    //bind a submit handler to the sample form 
    $(document).on('submit', '#testform', function(){ 
        $("input[name='triggered']").val("Submit button clicked.");      
        // cancel the normal submit  
        return false;    
    });
    //bind a reset handler to the sample form 
    $(document).on('reset', '#testform', function(){ 
        $("input[name='triggered']").val("Reset button clicked.");      
        // cancel the normal reset  
        return false;    
    });  
});
</script>  
</body>  
</html>

いくつかのコメント:

  • jQuery でバニラ Java スクリプトを使用しないでください。動作しますが、コードが汚れているように見えます。
  • jQuery Mobile を使用する場合は、コードをページ内にラップします。それがなくても機能しますが、完全には正しくありません。jQM バージョン 1.4 または 1.5 は、ページ コンテナー外のページ要素/ウィジェットを完全にサポートします。
于 2013-03-22T14:47:59.630 に答える
1

フォームタグをこれに変更します。

<form id='testform' action="#" data-ajax="false">

jQuerymobileはajaxを使用してフォームを送信しようとしています。

于 2013-03-22T14:29:37.007 に答える