单击后更改按钮上的文本并在 AJAX 后再次更改答案

【问题标题】：Change text on button after click and again after AJAX单击后更改按钮上的文本并在 AJAX 后再次更改
【发布时间】：2018-01-17 00:18:54
【问题描述】：

我正在使用此代码在单击按钮后更改按钮上的文本：

add_filter( 'gform_pre_render', 'gw_disable_submit' );
function gw_disable_submit( $form ) {

if( defined( 'DOING_AJAX' ) && DOING_AJAX ) {
    return $form;
}

?>

<script type="text/javascript">
    jQuery( document ).ready( function( $ ) {
        var formId = '<?php echo $form['id']; ?>';
        $( '#gform_submit_button_' + formId ).on( 'click', function( event ) {
            var $submitCopy = $( this ).clone();
            $submitCopy
                .html( "<i class='fa fa-spinner fa-pulse fa-1x fa-fw'></i>" )
                .insertBefore( $( this ) );
            $( this ).hide();
        } );
    } );
</script>

<?php
return $form;
}

第一次可以工作，但第二次点击按钮时就不行了，因为它只在加载时运行...

在第一次完成后，我需要更改什么以使按钮再次更改文本？

谢谢，马特

【问题讨论】：

标签： jquery ajax wordpress button

【解决方案1】：

你可以试试这个例子，

体积小、重量轻、可重复使用 自定义jQuery.fn：

jQuery.fn.extend({
    spin: function () {
        this.data("original-html", this.html());
        var i = '<i class='fa fa-spinner fa-pulse fa-1x fa-fw'></i>';
        this.html(i + this.html());
        this.attr("disabled", "disabled");
    },
    reset: function () {
        this.html(this.data("original-html"));
        this.attr("disabled", null);
    }
});

可以这样使用：

$("button").click(function () {
    var b = $(this);
    b.spin();
    $.ajax({
        url: "",
        button: b,
        success: function (result) {
            // do something
            b.reset();
        }
    });
});

希望对你有帮助。

【讨论】：