2

jQuery Mobile ボタンに問題があり、解決方法がわかりません。

クリックイベントをバインドしようとしています。クリック イベント中に、現在のページが別のページに変わるはずです。

イベントはこのボタンにバインドされています:

<a id="test" data-role="button">Test</a>

この JavaScript コードを使用して:

$(document).ready(function() {
    $('#test').on('click', function() {
        alert('Click!')
    });
});

このコードは最初は機能していましたが、サイトが大きくなるにつれて、まったく機能しなくなりました。

これが私の最初の質問なので、もう1つ質問します。どうすれば改善できますか? このサイトを閲覧した過去の経験から、私は多くの未回答の質問を見つけました.

4

2 に答える 2

2

この回答は jQuery Mobile の観点から書かれていますが、そのほとんどは他のグループでも使用できます。

免責事項

個人ブログからの投稿です。

面前

まず、最も重要なことは、質問を投稿して姿を消さないことです。少なくとも 30 分または 1 時間は固執して、(質問に対する) コメントまたはより良い回答を待ちます。通常、SO メンバーにはさらに質問があり、できるだけ早く回答する必要があります。これを雑用のように見ないでください。質問があり、正しい答えを得るために努力する必要があります。

誰もあなたの質問に答えない場合は、1 日に何度か戻ってきてください。

コード例

次に、コード例を提供する必要があります。多いほど良いですが、やりすぎないでください。大きなコード例を入れる場合は、すべてをコメントしてみてください。例: 「これは私のインデックス ページです。ここで問題が発生しました.....」. また、これは jQuery Mobile (jQuery の二次) に特化したグループであるため、js コードも配置するように注意してください。HTML コードよりも優先度が高くなります。

たとえば、これは適切にフォーマットされた質問です: jquery mobile でボタンをクリックすると別の html ファイルを読み込む方法

必要なものはすべてここにあります:

この js コードの例はページ全体をカバーしており、これを使用して実際の例を作成できます。それよりも、正しい方向に向けるだけの方がはるかに優れています。

<script type="text/javascript">
    $(document).ready(function() {
        var userName;
        var userPassword;

        $("#submitBtn").click(function() {
            //alert("HI");      
            userName = $("#UserName").val();
            userPassword = $("#Password").val();

            if ((!UserName)|| (!userPassword)) {
                alert("Enter the Details");
            }
            else {
                if ((userName !="alpha") ||(userPassword !="beta")) {
                    alert('Enter correct username and password');
                }
                else {
                    //here i want to load my selectOption.html file ?
                }             
            }                                  
        });                          
    });
</script>

上記の例のように、問題を確認し、動作する例を作成するには、これで十分です。

<body>
    <div data-role="page" id="home">        
        <div data-role="header">            
            <h1>Enter Credential</h1>                      
        </div>

        <div data-role="content">
            <label for="UserName">User Name</label>
            <input type="text" name="UserName" id="UserName" value="" style="width:220px;"  />

            <label for="Password">Password</label>
            <input type="password" name="Password" id="Password" value="" style="width:220px;"  />

            <div id="submitBtn" data-role="button">Submit</div>
        </div> 
    </div>
</body>

ライブコード例

3 番目に、もう少し先に進みたい場合は、コードから jsFiddle の例を作成できます。jsFiddle は優れたオンライン ツールであり、多くの SO メンバーがこれを使用して回答や質問を行っていることがわかります。

公式ページ： http: //jsfiddle.net/

通常、問題はより小さな HTML および JS の例で再現できるため、それを使用して実際に動作する例を作成してください。これが何回成功した答えになるのか、あなたは驚かれることでしょう。たとえば、これは私が他の SO メンバーを支援するために使用するテンプレートです。迅速かつ正確な回答を提供するために必要なすべてのものと、実際の例が含まれています: http://jsfiddle.net/Gajotres/yWTG2/

もう 1 つの重要な注意事項として、コード (HTML または js) は適切にフォーマットされている必要があります。大きなコード例がある場合は、このツールを使用してコードを自動的にきれいに見せることができます: http://jsbeautifier.org/

常に賢明に使用する必要があります。独自のコードに使用できることを忘れないでください。

追加情報

プロジェクト内で使用したフレームワークのバージョンを忘れずにお知らせください。これはとても重要です。通常、必要なのは jQuery と jQuery Mobile のバージョンだけです。追加のフレームワークを使用している場合は、それらのバージョンも追加する必要があります。

時間があれば、jQuery Mobile に関する私の追加の回答/記事をご覧ください。私の経験から、jQuery Mobile に関する質問の 50% はここで解決できます。

最終的な考え

最後に重要なこと。謙虚になりましょう。賢明な人は誰も好きではありません。あなたがどれほど頭が良くて優れた開発者であるかは問題ではありません。あなたはここで助けを求めています。私たちがあなたを助けるのを手伝ってください。

編集 ：

あなたの質問に答えるために、あなたの問題はドキュメントの準備ができている行にあります。通常、jQuery Mobile ページが初期化される前にトリガーされるため、jQuery Mobile では使用できません。ページが初期化されていない場合、ボタンは DOM 内に存在できません。

これを解決するには、次のように適切な jQuery Mobile ページ イベントを使用する必要があります。

$(document).on('pagebeforeshow', '#index', function(){      

});

$index はページの ID です。

于 2013-03-23T10:54:21.373 に答える
-1 
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Slider - Default functionality</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script>

function fun()
{

var some = $("#some").val();

    if (some.match("3")) {
       alert("Hello");
    }
}

</script>
</head>
<body>
<select id="some">
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
<button  id="btn" onclick='fun()' >Show</button>
</body>
</html>

こんにちは友人、これはあなたを助けるかもしれません。ありがとう ：）

于 2013-03-23T10:49:07.337 に答える