Question

我在表单页面的控制台中收到以下JavaScript错误：

Uncaught TypeError: $(...).tooltip is not a function

如果我重新加载页面，那么它可以正常工作。如果我从其他地方导航到该页面，那么它会给出错误。初始化工具提示的CoffeeScript是

$(document).on 'turbolinks:load', ->
  # copy all placeholders to title
  $('[data-toggle="tooltip"]').each ->
    $(this).attr 'title', $(this).attr('placeholder')
  $('[data-toggle="tooltip"]').tooltip()

我没有两次包含JQuery。

    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
    %script{:crossorigin => "anonymous", :src => "https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js", :integrity => "sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"}
    %script{:crossorigin => "anonymous", :src => "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js", :integrity => "sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"}
    / UIkit JS
    %script{:src => "https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/js/uikit.min.js"}
    %script{:src => "https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/js/uikit-icons.min.js"}    
    ...
  %body
    ...
    = yield
    = render 'layouts/footer'
    -# PureChat
    <script type='text/javascript' data-cfasync='false'>window.purechatApi = { l: [], t: [], on: function () { this.l.push(arguments); } }; (function () { var done = false; var script = document.createElement('script'); script.async = true; script.type = 'text/javascript'; script.src = 'https://app.purechat.com/VisitorWidget/WidgetScript'; document.getElementsByTagName('HEAD').item(0).appendChild(script); script.onreadystatechange = script.onload = function (e) { if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) { var w = new PCWidget({c: 'fffff-ffff-ffff-fffffffff', f: true }); done = true; } }; })();</script>

Bootstrap docs在这里。 Turbolinks docs就在这里。

我相信问题可能出在Turbolinks或PureChat上。由于某种原因，.tooltip()函数不可用，即使对它的调用包含在事件turbolinks:load中。此外，如果我从身体底部排除PureChat，我无法重现该问题。当我做包含PureChat时，控制台中的第一个错误是.tooltip()错误，但有时只是在我从一个页面导航到另一个页面时。有时它有效。如果我使用工具提示重新加载页面，它仍然可以工作。

类似的问题（link，link，link）都没有提到Turbolinks。我没有使用JQueryUI。我没有两次包括JQuery。

如何解决此错误？

Rails 5.0.6。

Answer 1

如果jquery不起作用，请使用此行，此行将修复

$(document).on("turbolinks:load", function () {
    console.log('into setInterval');
    if(window.jQuery){
        console.log('Get From first');
        return init();
    }else{
        console.log('into setInterval else');
        var fixloop = setInterval(() => {
            console.log('into setInterval');

            if(!window.jQuery){

                console.log('into setInterval inner if');
                var script = document.createElement('script');
                script.src = 'https://code.jquery.com/jquery-3.3.1.min.js';
                return init();
            }else{

                console.log('into setInterval inner else');
                clearInterval(fixloop);
                return init();

            }
        }, 50);
    }
});

这样的链接

<script src="https://code.jquery.com/jquery-3.3.1.min.js" ></script>
<script src="{{ asset('plugins/popper.js/dist/umd/popper.min.js') }}" data-turbolinks-eval='false'></script>
<script src="{{ asset('plugins/bootstrap/dist/js/bootstrap.min.js') }}" ></script>
<script src="{{ asset('dist/js/theme.js') }}" data-turbolinks-eval='true' > </script>

TurboLinks和Bootstrap 4和PureChat：Uncaught TypeError：$（...）。tooltip不是一个函数

1 个答案: