0

jqueryを使用して同じサイト内にあるsomepage.phpを呼び出してこのindex.htmlページのコンテンツをロードするindex.htmlページがあります。

したがって、これは意図されたページのロードシーケンスです：index.html-> somepage.php-> submit.php（送信ボタンがクリックされた場合）

index.htmlには「main-div」のみがあり、そのようなコンテンツはありません。somepage.phpが呼び出されると、phpスクリプトを実行して「main-div」の内容が読み込まれます。main-divには、送信ボタンのある小さなフォームのサブdivが含まれています。jQueryを使用して、送信ボタンがクリックされたかどうかを確認します。クリックすると、submit.phpスクリプトが呼び出されます。

これはベアボーンコードです：

<!DOCTYPE html>
<html>
<head>
        <script src="js/jquery.js"></script>
        <script>
            $('document').ready(function(){            

                $("#main-div").load("http://www.someurl.com/somepage.php");

                $('#item-submit').click(function(){
                    jsURL = $('#input').val();
                    submit(jsURL);

                });

                function submit(jsURL){
                    $.get(
                        'http://www.someurl.com/submit.php',    
                        {   item: jsURL   },
                        function(data){
                            if(data=="success")
                            {
                            $('#submit-status').html(data);
                            }
                            else
                            {
                            $('#submit-status').html(data);
                            }
                        }
                    );
                }


            });
        </script>

</head>
<body>

    <div id="main-div"> </div>

</body>
</html>

ここで問題：index.htmlページが読み込まれ、すべてが正しく表示されます（送信ボタンのある小さなフォーム、他のすべてのmain-divコンテンツ、すべてが表示されます）。ただし、送信ボタンはsubmit.phpスクリプトを呼び出さないため、クリックイベントに対応するjQueryコードが登録されていないと思います。

私はjQueryにかなり慣れていません。これは、jQuery .ready（）でコードを「順序付け」した方法と関係がありますか？関数が呼び出される前にDOMの準備ができていないことと関係がありますか、それともjQueryの.load（）に問題がありますか？

4

5 に答える 5

2 
$(document).ready(function(){            
    $("#main-div").load("http://www.someurl.com/somepage.php");

    $("#main-div").on('click', '#item-submit', function(e){
           e.preventDefault();
           var jsURL = $('#input').val();
           submit(jsURL);
    });

    function submit(jsURL){
      $.get('http://www.someurl.com/submit.php', {item: jsURL}, function(data){
           $('#submit-status').html(data);
      });
    }
});
  1. ドキュメントを引用しないでください
  2. load()はのショートカットで$.ajaxあり、非同期であるため#item-submit、イベントハンドラーをアタッチするときに存在しないため、委任されたイベントハンドラーが必要です。
  3. それが実際にフォーム内の送信ボタンである場合は、フォームが送信されないように、デフォルトのアクションを防止するようにしてください。
于 2013-03-24T12:09:46.707 に答える
2

このload関数は非同期で機能します。イベントハンドラーをバインドしようとすると、コード#item-submitはまだ存在しません。

成功時にイベントハンドラーをバインドします。

$("#main-div").load("http://www.someurl.com/somepage.php", function () {
    $('#item-submit').click(function () {
        jsURL = $('#input').val();
        submit(jsURL);
    });
});
于 2013-03-24T12:11:36.517 に答える
2

loadデータを非同期でロードします。つまり、送信ボタンにクリックハンドラーを割り当てるまでに、ボタン自体がまだページに表示されていない可能性があります。これを克服するには、2つのオプションがあります。

  1. ロードの成功ハンドラーを指定します。

    $("#main-div").load("http://www.someurl.com/somepage.php", function(){
    $('#item-submit').click(function(){
            jsURL = $('#input').val();
            submit(jsURL);
        });
});

  2. onページ上にある、またはページ上にある要素にクリックハンドラーを割り当てる必要があることを示すために使用します。

    $('#item-submit').on('click', function(){
    jsURL = $('#input').val();
    submit(jsURL);
});
于 2013-03-24T12:13:50.517 に答える
2

すべてが指摘しているように、load関数は非同期で機能するため、クリックハンドラーは「future」divでは機能しません。

次のように、ハンドラーを将来の要素にバインドできます。

$(document).on('click', '#item-submit', function(event){
          jsURL = $('#input').val();
          submit(jsURL);  
});

このようにして、jQueryドキュメントレディ関数でハンドラーをバインドできます。

于 2013-03-24T12:24:51.663 に答える
2

これを試して ：

<script>
$(document).ready(function(){
        $("#main-div").load("http://www.someurl.com/somepage.php",function(){
        $("#main-div").on('click', '#item-submit', function(e){
           e.preventDefault();
           var jsURL = $('#input').attr('value');
           submit(jsURL);
        });
        });
});

function submit(jsURL){
                    $.ajax({
                    url:'http://www.someurl.com/submit.php',
                    type :'GET',
                    success: function(data){
                    $('#submit-status').html(data);
                    }
                    });

                }
</script>
于 2013-03-24T12:28:00.210 に答える