jQuery小部件被调用两次

时间:2014-11-26 18:26:44

标签: javascript jquery

我正在尝试编写一个jQuery小部件,它从我没有编写的框架中包装一个Asp.NET控件,以便添加一些客户端功能并使用Bootstrap类来美化它。小部件在$.fn.arenaPicker中定义。我已经在我的.NET Control中添加了一个类arena-picker,然后在$(document).ready()中添加了一个名为$(".arena-picker").arenaPicker()的类。我的页面上只有一个.arena-picker对象。

出于某种原因,我的小部件被调用了两次。第一次,它在我的.arena-picker分类对象上被正确调用。第二次,它在jQuery的$(document)调用期间被completed()调用。

我已经仔细检查过我对.arenaPicker()的调用仅在我的页面代码中,所以我没有直接调用$(document).arenaPicker()或其他任何东西,堆栈跟踪在{{1}处结束在jQuery.js中绑定的(在v2.1.1中的第3424-242行):

completed()

我的小部件代码(bootstrap.arena.extensions.js):

// Use the handy event callback
document.addEventListener( "DOMContentLoaded", completed, false );

// A fallback to window.onload, that will always work
window.addEventListener( "load", completed, false );

我调用小部件,MyPage.ascx:

$.fn.arenaPicker = function () {
    'use strict';
    return $(this).map(function () {
        // <summary>
        // Used for Pickers of all kinds
        //   AttachmentPicker
        //   DocumentPicker
        //   ImagePicker
        //   LookupPicker
        //   PagePicker
        //   PersonPicker
        //   ProfilePicker
        //   ReportPicker
        // </summary>
        var Picker = (function () {
            // <param name="arenaPicker" type="domElement">input[type='text'] element of class .arena-picker generated by <Arena:*Picker /></param>
            var picker = function (pickerElement) {
                // bind all methods
                for (var fn in this) {
                    if (fn == "bind") {
                        continue;
                    }

                    this.bind(fn);
                }

                attachToDom(this, pickerElement);
                this.init();
            };

            var ...;

            picker.prototype = {
                bind: function (method) { ... },
                init: function () { ... },
                updateText: function () { .... },
            };

            var attachToDom = function (picker, pickerElement) { ... };

            return picker;
        })();

        return new Picker(this);
    });
};

First call call-stack

Second call call-stack

有什么想法吗?如果你告诉我在哪里,我会很乐意提供更多背景信息。

1 个答案:

答案 0 :(得分:0)

我明白了。

在MyPage.ascx中,我致电

ppPickerBehalfOf = $(".arena-picker").arenaPicker();

返回一个jQuery对象。在我未发布的下一行中,我引用了ppPickerBehalfOf.arenaPicker。在picker对象上,这是一个DOM元素。在jQuery对象上,这就是小部件本身。

我真的需要更好地命名。