0

我最近才开始使用 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);
        }

    }

});

先感谢您。

亲切的问候，威尔。

4

3 回答 3

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已经打开了 benn，并且您已经完成了。

于 2013-05-17T16:18:01.550 回答
0

你做 

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

那么第二次 if ($('.modalWrapper').html() !== '') 将永远是真的
jsfiddle

于 2013-05-17T16:19:09.210 回答
0

由于您在评论中描述的实际情况是使用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");
    });
});
于 2013-05-18T21:19:46.007 回答