0

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

我想做这个：

  • 在第一次点击发送查询并附div加到body（我的代码工作到这里）
  • 如果再次单击该按钮，则显示先前附加的div.

请注意action，我的 ajax 查询是在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>
4

5 回答 5

2

Try 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');
        },
    });
});
于 2013-07-16T01:38:30.943 回答
1

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

现在我的代码将检查data-loaded是真还是假，如果为假，那么它将发送 ajax 查询，并将数据加载更改为真。

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();
            });
        },
    });
});

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

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

于 2013-07-16T01:56:46.487 回答
1

这是我的方法：

在你的身体末端放一个 div。

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

每次单击按钮时，只需更新 append_container 的内容。这样您就不必担心比较内容是否更改。

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

于 2013-07-16T03:21:33.477 回答
1

这是一种避免使用任何挥之不去的变量污染父范围的方法：

(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;
    });
})()
于 2013-07-16T01:38:54.313 回答