0

以下のコードは、単純に Ajax 経由でフォームを送信し、addNewUser.php スクリプトからの結果を小さなポップアップ ウィンドウに追加します。

//activate the signup submit button
$('#button_signup_submit').click(function() {

    document.getElementById("popup_signup").style.display = "none";
    document.getElementById("popup_signup_step_two").style.display = "block";
    //submit the form info via ajax to addNewUser.php
    $.ajax({
         type: "POST",
         url: "ajax/addNewUser.php",
         data: { 
            username: document.forms["form_signup"]["username"].value,
            password: document.forms["form_signup"]["password"].value
         },
         datatype: "html",
         success: function(data){

                    var jqObj = jQuery(data);
                    $('#popup_signup_step_two').append(jqObj)
                }
    });

});

上記のスクリプトを取得して、ajax された html を元の Web ページに問題なく追加できます...しかし、2 番目のコードを使用すると、次のようになります。

//activate the second signup page's return button
$('#return_to_signup_form_from_ajax_popup').click(function() {
    alert("HEY");
    //erase innerHtml of popup_signup_step_two
    document.getElementById("popup_signup_step_two").innerHTML = "";
    document.getElementById("popup_signup_step_two").style.display = "none";

    //show the original signup form again, should contain user's original values
    document.getElementById("popup_background").style.display = "block";
    document.getElementById("popup_login").style.display = "block";

});

...これは、新しく追加された html で動作する jQuery スニペットです...何も起こりません。この 2 番目のコードは、ユーザーがユーザー名またはパスワードの入力を忘れ、ajax 経由で次のメッセージが表示された場合に適用されます。

<p>Go <span id="return_to_signup_form_from_ajax_popup">back</span> and enter a username and password.</p>

これはすべてDOMと関係があると思いますか？でも結局わからない。誰かが私に何を探すべきかを教えてくれさえしたら、私はそれを大いに感謝します.

4

3 に答える 3

2

クリック ハンドラーが document.ready にバインドされている場合$('#return_to_signup_form_from_ajax_popup')は、代わりにイベント委任を使用する必要があります。イベント委任は、イベントを現在および将来の要素にバインドするために使用されます。

イベント委任の詳細については、 http ://api.jquery.com/on/およびhttp://api.jquery.com/category/deferred-object/を参照してください。

于 2012-05-03T22:36:11.850 に答える
1

応答が適切な html を返していると確信している限り、問題ありません。代わりに、クリック ハンドラーを委任ハンドラーに変更することをお勧めします。そうすれば、ajax された html がライブ DOM に追加される前または後に初期化されたかどうかを心配する必要はありません。

編集: 最新の jqueryonメソッドを使用するように更新されました。(http://api.jquery.com/on/)

$('#containerElementThatAjaxdDataWillGoInto').on('click','#return_to_signup_form_from_ajax_popup', clickHandler );

編集：これは、明確にするためのさらなる試みです。

新しい html で ajax を実行していて、それを に追加してい#popup_signup_step_twoます。素晴らしい。したがって、この新しい html には、ハンドラーを関連付ける必要があるボタンもあります。これを行うには、イベント ハンドラーをデリゲートする必要があります。これ#popup_signup_step_twoにより、その dom 要素内で必要な要素のすべてのクリックをリッスンできます。

$('#popup_signup_step_two').on('click', '#return_to_signup_form_from_ajax_popup', function() {
    // do stuff here
});

これで、(ドキュメント内の準備が整った) この設定が完了したので、#return_to_signup_form_from_ajax_popup内の要素をクリック#popup_signup_step_twoすると、クリック ハンドラー関数が呼び出されます。現在のクリック ハンドラー内で、 に設定#popup_signup_step_twoしdisplay = noneます。したがって、そのアクションを再度実行する場合は、要素を に設定する必要がありますdisplay block。

これがさらに役立つことを願っています。まだどこかでお互いを見逃している場合は、これがjsfiddleに物事を取り入れ始めるか、リンクを提供する時です。

于 2012-05-03T22:35:50.353 に答える
0

$.ajax() を使用する代わりに、 $('#popup_signup_step_two').load() を使用します

方法の参考はこちら

于 2012-05-03T22:35:49.960 に答える