Question

我在点击按钮后使用此代码更改按钮上的文字：

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;
}

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

我需要更改什么才能让按钮在第一次完成后再次更改文本？

谢谢，马特

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

希望这会对你有所帮助。

单击后更改按钮上的文本，然后在AJAX后再次更改

1 个答案: