admin管理员组

文章数量:1391987

I am trying to display a button with ripple using material design lite but getting the following error:

app.js:3 Uncaught (in promise) TypeError: $ is not a function(…)

html file:

  <body>
      <script>
System.paths['jquery'] = './node_modules/jquery/dist/jquery.js';
              System.import('src/app.js');
</script> 
  </body>

app.js:

      import $ from 'jquery';
import {Button} from './ui/button.js';
let b=new Button('click me');
b.appendToElement($('body'));

button.js :

      import {BaseElement} from './base-element.js';

export class Button extends BaseElement {

    constructor(title) {
        super();
        this.title = title;
}

    getElementString() {
        return `
            <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"
                style="">
                ${this.title}
            </button>
        `;
    }

}

base-element.js:

    import $ from 'jquery';

export class BaseElement {

    constructor() {
        this.element = null;  // jQuery object
    }

    appendToElement(el) {
        this.createElement();
        el.append(this.element);
}

    createElement() {
        let s = this.getElementString();
        this.element = $(s);
    }

    getElementString() {
        throw 'Please override getElementString() in BaseElement';
    }
}

I am trying to display a button with ripple using material design lite but getting the following error:

app.js:3 Uncaught (in promise) TypeError: $ is not a function(…)

html file:

  <body>
      <script>
System.paths['jquery'] = './node_modules/jquery/dist/jquery.js';
              System.import('src/app.js');
</script> 
  </body>

app.js:

      import $ from 'jquery';
import {Button} from './ui/button.js';
let b=new Button('click me');
b.appendToElement($('body'));

button.js :

      import {BaseElement} from './base-element.js';

export class Button extends BaseElement {

    constructor(title) {
        super();
        this.title = title;
}

    getElementString() {
        return `
            <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"
                style="">
                ${this.title}
            </button>
        `;
    }

}

base-element.js:

    import $ from 'jquery';

export class BaseElement {

    constructor() {
        this.element = null;  // jQuery object
    }

    appendToElement(el) {
        this.createElement();
        el.append(this.element);
}

    createElement() {
        let s = this.getElementString();
        this.element = $(s);
    }

    getElementString() {
        throw 'Please override getElementString() in BaseElement';
    }
}
  • javascript
  • jquery
  • ecmascript-6
  • material-design
  • traceur
Share Improve this question asked Nov 29, 2016 at 7:54 YaSh ChaudharyYaSh Chaudhary 2,7259 gold badges39 silver badges76 bronze badges 8
  • it describe that your jquery is not imported in your file – Sanjay Commented Nov 29, 2016 at 7:58
  • @SanjayPatel is my syntax wrong or nythng else? – YaSh Chaudhary Commented Nov 29, 2016 at 8:02
  • What do you get when you console.log($)? – Michał Perłakowski Commented Nov 29, 2016 at 8:37
  • @Gothdo same error – YaSh Chaudhary Commented Nov 29, 2016 at 8:43
  • 2 Try import 'jquery'? – sdgluck Commented Nov 29, 2016 at 10:07
 |  Show 3 more ments

1 Answer 1

Reset to default 3

As jQuery attaches itself to the global object you should use import 'jquery'.

Using import $ from 'jquery' shadows $ on the global object with the default export of 'jquery', but jQuery doesn't export anything, so $ === undefined.

本文标签： javascriptUncaught (in promise) TypeErroris not a functionStack Overflow

版权声明：本文标题：javascript - Uncaught (in promise) TypeError: $ is not a function - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744643369a2617251.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。