Question

我最近才开始使用jQuery，所以任何额外的指导都会受到赞赏。

我正在尝试为我的网站添加一些不错的UI功能，特别是将单击的按钮文本更改为“等待”以显示该网站正在执行某些操作。如果按钮调用页面加载，它会说“等待”直到下一页加载 - 没问题...但有时按钮可能会调用弹出模式，用户可以取消并返回页面。因为用户可以返回，我需要检查单击按钮后是否出现弹出模式，如果是，则在此时更改按钮文本。

这段代码对我有用（有点），但是当我第二次点击按钮时，按钮变为“等待......”但是它不会改变回来。

这是一个尝试进一步解释的jsfiddle： http://jsfiddle.net/BU3SW/3/ （我担心关闭不适合小提琴，所以我不能完全展示给你。）

这是我的按钮：

<a class="button" href="#">Create</a>

我的jQuery：

$('.button').on('click', function () {
    var $this = $(this),
        v = $this.html(),
        s = 'go';

        //create a function to reset the text
        function fix() {
            $this.html(v);
            s = 'stop';
        }

    //check we are not clicking on green button
    if (!$this.hasClass('green')) {
        //change the text to wait...
        $this.html('wait...');

        //we will use a setInterval to keep checking every second
        //but only if "s" is still 'go' which means we are still waiting.
        if (s === 'go') {
            var intervalId = setInterval(function () {
                if ($('.modalWrapper').html() !== '') {
                    clearInterval(intervalId);
                    fix();
                }
            }, 1000);
        }

    }

});

提前谢谢。

亲切的问候，将

Answer 1

Scott Gonzales（jquery团队）说：

.html（）没有回调，因为它是同步的，所以任何代码在html之后肯定会发生.html（）调用之后执行已经确定了。

所以你只需写一些像

这样的东西

$('.button').on('click', function () {
    $(this).html("Wait...");
    $(".modalWrapper").html("bla bla bla");
    $(this).html("initial text");
});
$('.cancel').on('click', function () {
    $(".modalWrapper").html('');
});

您可以添加一种机制来检查modalwrapper是否已经全部打开，并且已完成。

Answer 2

你做了

$('.modalWrapper').html($('.partial').html());
$('.partial').html('');

然后第二次if（$（'。modalWrapper'）。html（）！==''）将永远为真 jsfiddle

Answer 3

由于您的实际情况（如评论中所述）是ajax的使用，您应该使用回调，而不是setInterval。

$('.button').on('click', function () {
    var $this = $(this)
    $this.html('wait...');

    $.ajax({...
        success: function(){
            $this.html("go");        
        }
    });
});

或类似的东西：

$('.button').on('click', function () {
    var $this = $(this)
    $this.html('wait...');

    $.ajax({...}).done(function(){
        $this.html("go");
    });
});

如何将按钮文本更改为Wait，检查内容更改，然后使用jQuery重置按钮文本

3 个答案: