Question

WordPress网站包含此按钮：

<button type="submit" id="finish" data-loading-text="Loading..." class="btn btn-success">Submit</button>

单击该按钮时，将触发此功能：

document.getElementById('finish').addEventListener('click', function(event){
    event.preventDefault();
    $('#finish').button('loading');
    $.ajax().always(function(){
        $('#finish').button('reset');
    });
});

但是当我单击按钮时，我得到：

Error: cannot call methods on button prior to initialization; attempted to call method 'loading'

以下是在网站上订购的相关脚本/样式：

<head>
    <link rel="stylesheet" id="buttons-css" href="https://website.com/wp-includes/css/buttons.min.css" type="text/css" media="all">
    <script type="text/javascript" src="https://website.com/wp-includes/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="https://website.com/wp-includes/js/jquery/jquery-migrate.min.js" defer="" onload=""></script>
    <link rel="stylesheet" href="https://website.com/wp-content/themes/theme/assets/datetimepicker/jquery.datetimepicker.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
</head>    

<body>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://website.com/wp-includes/js/jquery/ui/button.min.js" defer="" onload=""></script>
    <script type="text/javascript" src="https://website.com/wp-content/themes/theme/js/custom.js" defer="" onload=""></script>
</body>

我搜索了该问题，发现这是由于jquery-ui引起的，另一种解决方案是在bootstrap之后添加此函数：

$.fn.btnBootstrap = $.fn.button.noConflict();

我在名为custom.js的上一个脚本文件中添加了这一行：

document.getElementById('finish').addEventListener('click', function(event){
    ..
    $.fn.btnBootstrap = $.fn.button.noConflict();
    $('#finish').button('loading');
    $.ajax().always(function(){
        $('#finish').button('reset');
    });
});

但是我仍然遇到相同的错误，jquery-ui是通过插件添加的，因此我无法编辑其位置。

如何解决该问题？

引导程序按钮错误：无法在初始化之前调用按钮上的方法；尝试调用方法“加载”

0 个答案: