Question

我正在尝试为一个名为重力形式的wordpress插件制作一个包装器指令。该指令加载表单HTML并注入dom但由于某种原因，提交处理程序只被调用一次。

这是指令代码。

app.directive( 'gravityForm', ['api', function ( api ) {

        function gravityFormLink( scope, element ) {
            scope.$watch( 'formId', function ( formId ) {
                if ( formId ) {
                    var promise = api.query( 'get_gform_html', {formId: formId} );
                    promise.then( promiseSuccess );
                }

            } );


            function promiseSuccess( response ) {
                var gFormWrapperHTMLStr = '<div>' + response.data.data + '</div>';
                var gFormWrapper = angular.element( gFormWrapperHTMLStr );

                //Remove scripts injected by gravitry forms
                gFormWrapper.find( 'script' ).remove();

                element.html( gFormWrapper );

                element.on( 'submit', 'form', function ( e ) {
                    e.preventDefault();
                    // Only fires once
                    alert( 0 );

                } );



            }
        }

        return {
            scope: {formId: '@'},
            template: "<ajax-spinner></ajax-spinner>",
            link: gravityFormLink
        };
    }] );

Answer 1

提交按钮onclick处理程序中有代码禁用了子目录

app.directive( 'gravityForm', ['api', function ( api ) {

    function gravityFormLink( scope, element ) {
        scope.$watch( 'formId', function ( formId ) {
            if ( formId ) {
                var promise = api.query( 'get_gform_html', {formId: formId} );
                promise.then( promiseSuccess );
            }

        } );


        function promiseSuccess( response ) {
            var gFormWrapperHTMLStr = '<div>' + response.data.data + '</div>';
            var gFormWrapper = angular.element( gFormWrapperHTMLStr );

            //Remove scripts injected by gravitry forms
            gFormWrapper.find( 'script' ).remove();

            //*** Removing gform's submit handler
            gFormWrapper.find( ':submit' ).removeAttr( 'onclick' );

            element.html( gFormWrapper );

            element.on( 'submit', 'form', function ( e ) {
                e.preventDefault();
                // Only fires once
                alert( 0 );

            } );



        }
    }

    return {
        scope: {formId: '@'},
        template: "<ajax-spinner></ajax-spinner>",
        link: gravityFormLink
    };
}] );

AngularJS指令Jquery提交事件处理程序只触发一次

1 个答案: