1

重複の可能性：
ajax/jquery呼び出しからsuccess関数の外部で変数を使用する

私はこのコードを持っていますが、html要素へのアクセスがajax成功関数内でのみ機能している理由がわかりません。フォームはどちらの方法でもajaxからプルインされますが、フォームの要素のすべての選択をajax関数内に配置した場合にのみ、フォームにアクセスできます。

console.log('submit clicked');はこのようにトリガーされませんが、「ajaxの成功」の中で、ajaxで引き込まれたすべてのものがDOMの一部であると思いましたか？

jQuery(document).ready(function($) {

console.log('ready');

$.ajax({
    type: 'GET',
    url: 'admin-ajax.php',
    data: { action: 'get_arve_form' },
    success: function(response){
        // var table = $(response).find('table');
        $(response).appendTo('body').hide();
        console.log('response');

                    [ if i move the code below this ajax function in here its workign fine why not outside of it?]

    }
});

// handles the click event of the submit button
$('#mygallery-submit').click(function(){
    console.log('submit clicked');
                [...]
        });
4

3 に答える 3

2

Ajaxは非同期であるため、ajax呼び出しが終了するまで要素は存在しません。

そうは言っても、それを修正する方法は2つあります。

1）コードをサクセスハンドラーに移動します

2）イベント委任を使用して、イベントハンドラーを現在および将来のすべての要素にバインドします。

＃2の例：

$(document).on('click', '#mygallery-submit', function(){
    console.log('submit clicked');
});

イベントの委任について詳しくは、jQFundamentalsをご覧ください。

于 2013-01-29T18:52:06.120 に答える
1

これがajaxの仕組みです。外部ページが読み込まれると、成功ハンドラーでのみ使用できるようになります。他の場所で利用できるようにしたい場合は、自分が行っているように、なんらかの方法で保存する必要があります。

ただし、.click関数は、ajax呼び出しが成功を返す前に実行されます。$（'＃mygallery-submit'）を選択すると、ほとんどの場合空になります（おそらく、これをajax経由でロードします）。したがって、ajaxページが読み込まれるときではなく、ドキュメントの準備ができた状態でクリック関数を宣言する場合は、.on関数を使用する必要があります。

$('body').on('click', '#mygallery-submit', function() {
    console.log('submit clicked');
});
于 2013-01-29T18:54:20.210 に答える
0

.click()は委任されたハンドラーではないためです。イベントをバインドしようとしている要素が実行時に存在しない場合、イベントはバインドされません。.on()代わりに試してください。

$('body').on('click', '#mygallery-submit', function() {
    // etc.
});
于 2013-01-29T18:52:18.187 に答える