未捕获的 ReferenceError：onPrevious 未在 HTMLAnchorElement.onclick 中定义

Question

我遇到了 Uncaught ReferenceError: previous is not defined at HTMLAnchorElement.onclick 请帮助我，我已经尝试过之前针对同一问题提供的所有解决方案，但没有帮助。 我已经有了 jquery 版本和 bootstrap 版本。 我正在粘贴整个脚本代码和放置按钮的 html 标记。

<ul class="pager wizard">
   <li class="previous"><a  href="javascript:;" >Previous</a></li>
   <li class="next"><a href="javascript: void(0);" onclick="onPrevious(tab, navigation, index);">Next</a></li>
</ul>


<script>
$(document).ready(function() {
    // You don't need to care about this function
    // It is for the specific demo
    function adjustIframeHeight() {
        var $body   = $('body'),
                $iframe = $body.data('iframe.fv');
        if ($iframe) {
            // Adjust the height of iframe
            $iframe.height($body.height());
        }
    }

    $('#installationForm')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            // This option will not ignore invisible fields which belong to inactive panels
            excluded: ':disabled',
            fields: {
                type_of_service: {
                    validators: {
                        notEmpty: {
                            message: 'The type of service is required'
                        }
                    }
                },
                academic_level: {
                    validators: {
                        notEmpty: {
                            message: 'The academic level is required'
                        }
                    }
                },

                type_of_paper: {
                    validators: {
                        notEmpty: {
                            message: 'The type of paper is required'
                        }
                    }
                },

                topic: {
                    validators: {
                        notEmpty: {
                            message: 'The topic is required'
                        }
                    }
                },

                subject: {
                    validators: {
                        notEmpty: {
                            message: 'The subject is required'
                        }
                    }
                },

                type_of_citation: {
                    validators: {
                        notEmpty: {
                            message: 'The type of citation is required'
                        }
                    }
                },

               order_deadline: {
                    validators: {
                        notEmpty: {
                            message: 'The order deadline is required'
                        }
                    }
                },
                pages: {
                    validators: {
                        notEmpty: {
                            message: 'The number of pages is required'
                        }
                    }
                },
                type_of_spacing: {
                    validators: {
                        notEmpty: {
                            message: 'The type of spacing is required'
                        }
                    }
                },

                category_of_writer: {
                    validators: {
                        notEmpty: {
                            message: 'Select your prefered writer'
                        }
                    }
                },

                fullname: {
                    validators: {
                        notEmpty: {
                            message: 'Please specify your full name'
                        }
                    }
                },

                email: {
                    validators: {
                        notEmpty: {
                            message: 'The email address is required'
                        },
                        emailAddress: {
                            message: 'The email address is not valid'
                        }
                    }
                },
                dbServer: {
                    validators: {
                        notEmpty: {
                            message: 'The server IP is required'
                        },
                        ip: {
                            message: 'The server IP is not valid'
                        }
                    }
                },
                dbName: {
                    validators: {
                        notEmpty: {
                            message: 'The database name is required'
                        }
                    }
                },
                dbUser: {
                    validators: {
                        notEmpty: {
                            message: 'The database user is required'
                        }
                    }
                }
            }
        })
        .bootstrapWizard({
            tabClass: 'nav nav-pills',
            onTabClick: function(tab, navigation, index) {
                return validateTab(index);
            },
            onNext: function(tab, navigation, index) {
                var numTabs    = $('#installationForm').find('.tab-pane').length,
                    isValidTab = validateTab(index - 1);
                if (!isValidTab) {
                    return false;
                }

                if (index === numTabs) {
                    // We are at the last tab

                    // Uncomment the following line to submit the form using the defaultSubmit() method
                     $('#installationForm').formValidation('defaultSubmit');

                    // For testing purpose
                    //$('#completeModal').modal();
                }

                return true;
            },
            onPrevious: function(tab, navigation, index) {
                return validateTab(index + 1);
            },
            onTabShow: function(tab, navigation, index) {
                // Update the label of Next button when we are at the last tab
                var numTabs = $('#installationForm').find('.tab-pane').length;
                $('#installationForm')
                    .find('.next')
                        .removeClass('disabled')    // Enable the Next button
                        .find('a')
                        .html(index === numTabs - 1 ? 'Place Order' : 'Next');

                // You don't need to care about it
                // It is for the specific demo
                adjustIframeHeight();
            }
        });
    function validateTab(index) {
        var fv   = $('#installationForm').data('formValidation'), // FormValidation instance
            // The current tab
            $tab = $('#installationForm').find('.tab-pane').eq(index);

        // Validate the container
        fv.validateContainer($tab);
        var isValidStep = fv.isValidContainer($tab);
        if (isValidStep === false || isValidStep === null) {
            // Do not jump to the target tab
            return false;
        }
        return true;`enter code here`
    }

});`enter code here`
</script>

Answer 1

一个简单的解决方案是在全局范围内声明它并在 jQuery 范围内重用它。

<ul class="pager wizard">
   <li class="previous"><a  href="javascript:;" >Previous</a></li>
   <li class="next"><a href="javascript: void(0);" onclick="onPrevious(tab, navigation, index);">Next</a></li>
</ul>


<script>

// Your function is declared globally.
function onPrevious(tab, navigation, index) {
    return validateTab(index + 1);
}

$(document).ready(function() {
    // You don't need to care about this function
    // It is for the specific demo
    function adjustIframeHeight() {
        var $body   = $('body'),
                $iframe = $body.data('iframe.fv');
        if ($iframe) {
            // Adjust the height of iframe
            $iframe.height($body.height());
        }
    }

    $('#installationForm')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            // This option will not ignore invisible fields which belong to inactive panels
            excluded: ':disabled',
            fields: {
                type_of_service: {
                    validators: {
                        notEmpty: {
                            message: 'The type of service is required'
                        }
                    }
                },
                academic_level: {
                    validators: {
                        notEmpty: {
                            message: 'The academic level is required'
                        }
                    }
                },

                type_of_paper: {
                    validators: {
                        notEmpty: {
                            message: 'The type of paper is required'
                        }
                    }
                },

                topic: {
                    validators: {
                        notEmpty: {
                            message: 'The topic is required'
                        }
                    }
                },

                subject: {
                    validators: {
                        notEmpty: {
                            message: 'The subject is required'
                        }
                    }
                },

                type_of_citation: {
                    validators: {
                        notEmpty: {
                            message: 'The type of citation is required'
                        }
                    }
                },

               order_deadline: {
                    validators: {
                        notEmpty: {
                            message: 'The order deadline is required'
                        }
                    }
                },
                pages: {
                    validators: {
                        notEmpty: {
                            message: 'The number of pages is required'
                        }
                    }
                },
                type_of_spacing: {
                    validators: {
                        notEmpty: {
                            message: 'The type of spacing is required'
                        }
                    }
                },

                category_of_writer: {
                    validators: {
                        notEmpty: {
                            message: 'Select your prefered writer'
                        }
                    }
                },

                fullname: {
                    validators: {
                        notEmpty: {
                            message: 'Please specify your full name'
                        }
                    }
                },

                email: {
                    validators: {
                        notEmpty: {
                            message: 'The email address is required'
                        },
                        emailAddress: {
                            message: 'The email address is not valid'
                        }
                    }
                },
                dbServer: {
                    validators: {
                        notEmpty: {
                            message: 'The server IP is required'
                        },
                        ip: {
                            message: 'The server IP is not valid'
                        }
                    }
                },
                dbName: {
                    validators: {
                        notEmpty: {
                            message: 'The database name is required'
                        }
                    }
                },
                dbUser: {
                    validators: {
                        notEmpty: {
                            message: 'The database user is required'
                        }
                    }
                }
            }
        })
        .bootstrapWizard({
            tabClass: 'nav nav-pills',
            onTabClick: function(tab, navigation, index) {
                return validateTab(index);
            },
            onNext: function(tab, navigation, index) {
                var numTabs    = $('#installationForm').find('.tab-pane').length,
                    isValidTab = validateTab(index - 1);
                if (!isValidTab) {
                    return false;
                }

                if (index === numTabs) {
                    // We are at the last tab

                    // Uncomment the following line to submit the form using the defaultSubmit() method
                     $('#installationForm').formValidation('defaultSubmit');

                    // For testing purpose
                    //$('#completeModal').modal();
                }

                return true;
            },
            onPrevious: onPrevious, // You reuse it here.
            onTabShow: function(tab, navigation, index) {
                // Update the label of Next button when we are at the last tab
                var numTabs = $('#installationForm').find('.tab-pane').length;
                $('#installationForm')
                    .find('.next')
                        .removeClass('disabled')    // Enable the Next button
                        .find('a')
                        .html(index === numTabs - 1 ? 'Place Order' : 'Next');

                // You don't need to care about it
                // It is for the specific demo
                adjustIframeHeight();
            }
        });
    function validateTab(index) {
        var fv   = $('#installationForm').data('formValidation'), // FormValidation instance
            // The current tab
            $tab = $('#installationForm').find('.tab-pane').eq(index);

        // Validate the container
        fv.validateContainer($tab);
        var isValidStep = fv.isValidContainer($tab);
        if (isValidStep === false || isValidStep === null) {
            // Do not jump to the target tab
            return false;
        }
        return true;
    }

});
</script>

编辑

这里有一个 sn-p 来证明它是有效的。

<ul class="pager wizard">
   <li class="previous"><a  href="javascript:;" >Previous</a></li>
   <li class="next"><a href="javascript: void(0);" onclick="onPrevious('tab', 'navigation', 'index');">Next</a></li>
</ul>

<script>
// Your function is declared globally.
function onPrevious(tab, navigation, index) {
    console.log(tab, navigation, index)
    //return validateTab(index + 1);
}
</script>