如何将多个jQuery自定义小部件添加到div并稍后调用其方法

Question

我有对象容器<div id="dObjectContainer" class="dObjectContainer"> 和一个小部件TreeObject。

        $.widget('qs.TreeObject2', {

    options: {
        oID: '0',
        IMGUrl: '../../Content/Images/noIMG.jpg',
        Name: 'Name',
        IsActive: true,
        IsVisible: true

    },
    _create: function () {
        var self = this,
        o = self.options,
        el = self.element;
        el.attr("oID", o.oID);
        el.addClass("dObject");
        el.addClass("ui-widget-content");

        var H1 = $("<h1></h1>").text(o.Name);
        el.append(H1);

        var img = $("<img></img>");
        img.attr("src", o.IMGUrl);
        img.attr("alt", o.Name);
        el.append(img);


    },
    DoHide: function (strName, bActive) {
        var self = this,
        o = self.options;
        if (((o.Name.toUpperCase().indexOf(strName.toUpperCase()) > -1) || (strName == "")) && ((o.IsActive) || (bActive == false))) {
            if (!o.IsVisible) {
                this.element.show();
                o.IsVisible = true;
            }
        }
        else {
            if (o.IsVisible) {
                this.element.hide();
                o.IsVisible = false;
            }
        }

    },

    destroy: function () {
        $.Widget.prototype.destroy.call(this);

    }
});

我想从javascript中添加多个这样的对象：

    $('#dObjectContainer').append($("<div></div>").TreeObject2({ oID: "1", IMGUrl: '../../Content/Images/StoredImages/Categories/images.jpg', Name: "n1", IsActive: true }));
    $('#dObjectContainer').append($("<div></div>").TreeObject2({ oID: "2", Name: "n2",  IsActive: false }));

这种方法增加了每个对象的两个元素而不是一个。 - 发现原因 - 对于一些未知的共振ASP.MVC 3 razor视图调用(function ($) {} (jQuery));两次。第一次它只调用view document.ready - 第二次布局页面和查看文档准备就绪。

其他部分 - 如何访问他们的方法：

$('.dObject').TreeObject2("DoHide", strName, bActive);

这适用于没有更多元素具有类dObject的情况。