0

HTMLを取得するためにサーバーにajaxクエリを送信しています。

私はこれをしたい：

  • 最初のクリックでクエリを送信し、に追加しますdiv（body私のコードはここまで機能します）
  • ボタンが再度クリックされた場合は、以前に追加されdivた .

action私の ajax クエリでは、button indata属性で定義されていることに注意してください。

これが私のjQueryコードです。クリックするたびにajaxクエリを送信します：

jQuery('.open-box').click(function(){
    var action = jQuery(this).data('action');
    jQuery.ajax({
        type    : 'GET',
        url     : ajaxurl,
        data    : { action    : action},
        dataType: 'html',
        context: this,
        success: function (response) {
            jQuery(response).show().appendTo('body');
        },
    });
});

ここに私のボタンhtmlがあります

<button class="open-box" data-action="test-html">Open box</button>
4

5 に答える 5

1

私はjQueryの専門家ではありませんが、このソリューションは良いと思います:

これで、私のコードdata-loadedは true か false かをチェックし、false の場合は ajax クエリを送信し、data-loaded を true に変更します。

jQuery('.open-box').click(function(){

    if (this.data('loaded')){
            jQuery(this).data('loaded', 'true');
        var action = jQuery(this).data('action');
        jQuery.ajax({
            type    : 'GET',
            url     : ajaxurl,
            data    : { action    : action},
            dataType: 'html',
            context: this,
            success: function (response) {
                jQuery(response).show().appendTo('body');

            },
        });
    }else{
        //show the appended div
    }
});

マイボタン HTML

<button class="open-box" data-action="test-html" data-loaded="false">Open box</button>
于 2013-07-16T01:53:56.027 に答える
1

ワンクリックで AJAX 呼び出しを実行し、その後すべてのクリックで div を表示します。

// set one click to trigger ajax
jQuery('.open-box').one(function() {
    jQuery.ajax({
        type    : 'GET',
        url     : ajaxurl,
        data    : { action    : action},
        dataType: 'html',
        context: this,
        success: function (response) {
            var createdDiv = jQuery(response);
            createdDiv.show().appendTo('body');
            // now hook up futher clicks to show the div
            jQuery('.open-box').click(function() {
                createdDiv.show();
            });
        },
    });
});

クラス「オープンボックス」のボタン（または何でも）が1つしかないことを前提としています。

「open-box」クラスのボタンが複数ある場合は、createdDiv をデータ変数に保存し、クリック ハンドラで参照を取得できます。

于 2013-07-16T01:56:46.487 に答える