无法在我的JQuery原型类上引用方法

Question

I'm defining the behaviour for my content_item elements like this:

    $.fn.makeContentItem = function() {

        $(this).selectItem = function() {
            $(".content_item").removeClass("selected");
            $(this).addClass("selected");
            console.log($(this).css('width'));
        }

        $(this).click(function(event) {
            console.log($(this));
            $(this).selectItem();
        });

    }

I then apply makeContentItem with:

$(".content_item").makeContentItem();

Clicking a content_item element generates this error:

Uncaught TypeError: Object [object Object] has no method 'selectItem'

Answer 1

You added the method to a jQuery collection, then discarded that jQuery collection. Instead, you should to add it to the elements data structure and reference it from that.

$.fn.makeContentItem = function() {

    this.data("selectItem",function() {
        $(".content_item").removeClass("selected");
        $(this).addClass("selected");
        console.log($(this).css('width'));
    });

    this.click(function(event) {
        console.log($(this));
        $(this).data("selectItem").call(this);
    });

}

or better yet, just make it a private function.

$.fn.makeContentItem = function() {

    var selectItem = function() {
        $(".content_item").removeClass("selected");
        $(this).addClass("selected");
        console.log($(this).css('width'));
    };

    this.click(function(event) {
        console.log($(this));
        selectItem.call(this);
    });

    // and to make it a complete plugin, return this.
    return this;

}