0

私は次のHTMLを持っています:

    <a id="foo">Click Me</a>

    <form action="" method="post">
        <input type="submit" value="submit">
    </form>

    <script type="text/javascript">

        $(function() {
            $('#foo').click(function() {
                alert('hello');
            });
        });

    </script>

ご覧のとおり、送信ボタン (ページをリロードする) をクリックするまで、「クリックしてください」は正常に機能します。

フォームの送信後でも「クリックしてください」が期待どおりに機能するように、これを防ぐにはどうすればよいですか?

注: my の中身は次の<head>とおりです。

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

更新：削除してみました

<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />タグ内headでは機能しますが、この CSS ファイルは Jquery Mobile の重要な部分です。

4

2 に答える 2

2

可能性はほとんどありません。

属性data-ajax="false"をフォームに追加できます。このため、フォームは通常のフォームとして機能します。それがなければ、jQuery Mobile はフォームの送信を処理しますが、これはおそらく望まないことです。

<form action="" method="post" data-ajax="false">
    <input type="submit" value="submit">
</form>

他の解決策は、クリック イベントのバインド方法を変更することです。あなたの方法の代わりに、次のような最新のソリューションを使用する必要があります。

$(document).on('click','#foo',function() {
    alert('hello');
});

最後に一つだけ。何をしているのかわからない場合は、このコードを使用して DOM Ready でクリック イベントをバインドしないでください。

    $(function() {
        $('#foo').click(function() {
            alert('hello');
        });
    });

純粋な jQuery とは異なり、jQuery Mobile は異なるロジックを使用します。これは、ドキュメントの準備が整ったときに jQuery Mobile ページがまだ完全に読み込まれておらず、DOM 内で拡張されていないためです。このため、jQM 開発者はページ イベントを作成しました。もっと知りたい場合は、そのトピックに関する私の他の回答を読んでください: jQuery Mobile: document ready vs page events

于 2013-05-05T19:50:13.323 に答える
0

これを変更できます：

   <input type="submit" value="submit">

為に：

   <input type="button" value="submit">

これが..だと教えてください:D

于 2013-05-05T19:51:05.177 に答える