几秒后使用jQuery更改输入按钮文本

I'm using a form and jQuery to make a quick change on a web site. I would like to change the button text to 'Saved!' then change it back to Update after a few seconds so the user can change the value again. Of course they can hit the now 'Saved!' button again, but it doesn't look nice.

我正在使用表单和jQuery在网站上进行快速更改。我想将按钮文字更改为“已保存!”然后在几秒钟后将其更改回Update,以便用户可以再次更改该值。当然他们可以打到现在'保存!'按钮再次,但它看起来不太好。

$("form.stock").submit(function(){
    // Example Post
    $.post($(this).attr('action'), { id: '123', stock: '1' });
    $(this).find(":submit").attr('value','Saved!');
    // This doesn't work, but is what I would like to do
    setTimeout($(this).find(":submit").attr('value','Update'), 2000);
    return false;
});

5 个解决方案

#1

First argument to setTimeout is function. So wrap your code inside an anonymous function and you are good to go.

setTimeout的第一个参数是function。所以将你的代码包装在一个匿名函数中,你就可以了。

$("form.stock").submit(function(){
    // Example Post
    $.post($(this).attr('action'), { id: '123', stock: '1' });
    var submit = $(this).find(":submit").attr('value','Saved!'); //Creating closure for setTimeout function. 
    setTimeout(function() { $(submit).attr('value','Update') }, 2000);
    return false;
});

I am not able to test this code right now. Let me know if it doesn't work.

我现在无法测试此代码。如果它不起作用,请告诉我。

EDIT: As suggested by redsquare, it makes sense to create closure from the submit button itself.

编辑:正如redsquare所建议的那样,从提交按钮本身创建闭包是有意义的。

#2

If it's actually a "button" tag then to change it you would use.

如果它实际上是一个“按钮”标签,那么你要改变它。

$('#button_id').html('New Text');

Of course if you're preforming this onClick for that button then you could easily just pass (this) into the function as an object and $(this).html('New Text'); instead.

当然,如果你正在为这个按钮执行onClick,那么你可以轻松地将(this)传递给函数作为对象和$(this).html('New Text');代替。

Hope this helps someone.

希望这有助于某人。

#3

I would suggest, perhaps, a different (in my opinion better) interface to give feedback than changing the text of the button. You could use jGrowl or the dialog widget to display a message via a callback from the post method.

或许,我建议使用不同的(在我看来更好)界面来提供反馈,而不是更改按钮的文本。您可以使用jGrowl或对话框小部件通过post方法的回调显示消息。

$("form.stock").submit(function(){
    $.post(
        $(this).attr('action'),
        { id: '123', stock: '1' },
        function() { $.jGrowl("Your update was successfully saved."); }
    );
});

#4

You probably want to wrap the action in a function:

您可能希望将操作包装在函数中:

setTimeout(function(){$(this).find(":submit").attr('value', 'Update')}, 2000);

#5

$("form.stock").submit(function(){
    var $form = $(this);
    $.post( $form.attr('action'), { id: '123', stock: '1' } );
    var $submit = $form.find(":submit").attr('value','Saved!');
    window.setTimeout(function() {
         $submit.attr('value','Update') 
    }, 2000);
    return false;
});

#1