在其他jQuery插件中调用自定义jQuery插件

Question

I am using Twitter Bootstrap's .popover jQuery plugin. I am writing my own jQuery plugin that utilizes .popover , but the console says that this "has no method 'popover'." Here's my code:

$.fn.mypopover = function(msg){
    this.click(function(){
        this.popover({title:"Static title",content:msg,trigger:'manual'}).popover('show');
    });
}

Answer 1

Inside the $.fn.popover function, this is the jQuery object that popover() was called on. However, inside the callback to this.click() , this is the element that triggered the click event. Every time you are inside another function , this will be different (based on how the function is called).

You need to do $(this).popover() inside the click event.

$.fn.mypopover = function(msg){
    // "this" is a jQuery object
    this.click(function(){
        // "this" is a DOM element
        $(this).popover({title:"Static title",content:msg,trigger:'manual'}).popover('show');
    });
}