Question

我正在向服务器发送ajax查询以获取一些HTML。

我想这样做：

首次点击发送查询并将div追加到body（我的代码可以在这里工作）
如果再次点击该按钮，则会显示之前添加的div。

请注意我的ajax查询的action在data属性的按钮中定义了一件事。

这是我的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>

Answer 1

尝试one()，这是一个事件处理程序，每个元素只运行一次：

jQuery('.open-box').one('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');
        },
    });
});

Answer 2

这是一种方法，可以避免使用任何延迟变量污染父作用域：

(function(){
    // This will be packaged into the handler as a closure
    var hasBeenClicked = false;

    jQuery('.open-box').click(function(){
        if(!hasBeenClicked) {
            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');
                },
            });
        }
        hasBeenClicked = true;
    });
})()

Answer 3

我不是jQuery专家，但我认为这个解决方案很好：

现在我的代码将检查data-loaded是真还是假，如果为false则会发送ajax查询，并将数据加载更改为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>

Answer 4

您只需单击一次即可进行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();
            });
        },
    });
});

我假设你只有一个按钮（或其他）与“open-box”类。

如果您有多个带有“open-box”类的按钮，则可以将createdDiv保存在数据变量中，并在单击处理程序中检索引用。

Answer 5

这是我的方法：

在你身体末端放一个div。

<body>
  ......
  <div id="append_container"></div>
</div>

每次单击该按钮时，只需更新append_container的内容即可。这样，您无需担心比较内容是否已更改。

如果您只想加载一次内容，可以检查容器是否有任何内容。然后决定进行ajax调用。

jQuery - 发送一次后不要再发送ajax查询

5 个答案: