Question

当我尝试附加工具提示时，控制台中会记录以下错误。

未捕获的TypeError：未捕获的TypeError：$（...）。tooltip不是函数

我的编译器通过intellisense向我展示了所有工具提示选项，所以它似乎是通过类型定义文件获取引导程序模块。

import * as $ from "jquery";
import * as bootstrap from "bootstrap";

$(function () {
    // jquery works
    $("#btnOnboardingFilesUpload")
        .click(function () { alert('upload files'); })
        .attr('disabled', 'disabled')
        .attr('title', 'You haven\'t selected any files.')
        .attr('data-placement', 'top');

    // bootstrap doesn't? Uncaught TypeError: Uncaught TypeError: $(...).tooltip is not a function
    $("#btnOnboardingFilesUpload").tooltip();
});

当我尝试通过console.log(bootstrap);记录引导时，对象为空：

{}

知道为什么不加载bootstrap？

我在package.json中有以下依赖项：

  "dependencies": {
    "ts-loader": "^3.2.0",
    "jquery": "^2.2.0",
    "bootstrap": "^3.3.5"
  },

Answer 1

出于某种原因，虽然我不确定为什么，但是当我将它包装在<div class="chat"> <div class="avatar"></div> <div class="content"> This is a chat. </div> <div class="meta"> 10:31 AM </div> </div> <div class="chat"> <div class="avatar"></div> <div class="content"> This is a chat. </div> <div class="meta"> 10:31 AM 10:31 AM 10:31 AM </div> </div> IIFE中时，bootstrap正常工作。

(function($) { })(jQuery);

Answer 2

我一直在努力解决同一件事，我认为解决方案只是用import "bootstrap";

替换导入

由于您想要从Bootstrap中获得的所有内容只是jQuery的扩展，因此这似乎是秘密所在。作为参考，此解决方案是从SO的另一个答案中得出的：Import jquery and bootstrap in typescript commonjs

示例：

import "jquery";
import "bootstrap";

export class Grid {
    // additional properties here...

    constructor(options?:Partial<Grid>) {
        $.extend(this, options); // allow for assigning values to properties via the constructor
    }
    Initialize() {
        var _this = this;
        $(document).ready(function () {
            $(window).on('load', function () {
                $(_this.FileUploadButton)
                    .click(function () { _this.UploadFiles($(this)); })
                    .attr('disabled', 'disabled')
                    .attr('title', 'You haven\'t selected any files.')
                    .attr('data-placement', 'top')
                    .tooltip();
    // etc...

Answer 3

您也可以通过使用 rubygems jquery-ui-rails 和 jquery-ui-themes 来解决这个问题我的 application.js 有 require("bootstrap") 和 import("bootstrap") 但我遇到了同样的问题 TypeError: $(...).tooltip 不是我使用 gems 解决的函数

TypeScript $（...）。tooltip不是一个函数

3 个答案: