jQuery widget being called twice

Question

I'm trying to write a jQuery widget that wraps an Asp.NET control from a framework I didn't write in order to add some client-side functionality and beautify it with Bootstrap classes. The widget is defined in $.fn.arenaPicker . I've added a class to my .NET Control, arena-picker , then, in $(document).ready() , called $(".arena-picker").arenaPicker() . I have exactly one .arena-picker object on my page.

For some reason, my widget is being called twice. The first time, it's being called correctly on my .arena-picker -classed object. The second time, it's being called on $(document) during jQuery's completed() call.

I've double-checked that my call to .arenaPicker() is only in my page code once, so I am not directly calling $(document).arenaPicker() or anything, and the stack trace ends at completed() which is bound, in jQuery.js (lines 3424-2428 in v2.1.1):

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

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

My widget code (bootstrap.arena.extensions.js):

$.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);
    });
};

Where I call the widget, MyPage.ascx:

var ppPickerBehalfOf;
...
$(document).ready(function () {
    ppPickerBehalfOf = $(".arena-picker").arenaPicker();
    ...
});

Any ideas? I'll be happy to give more context if you tell me where.

Answer 1

I figured it out.

In MyPage.ascx, I call

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

which returns a jQuery object. In the next line, which I did not post, I reference ppPickerBehalfOf.arenaPicker . On a picker object, that's a DOM element. On a jQuery object, that's the widget itself.

I really need to get better at naming things.