Question

I have been developing a jquery widget that extends ui.mouse.

The widget needs to react to mouse events by creating elements and appending them to this.element.

In the case that the widget is applied to an HTML element such as an IMG tag that cannot contain child elements, the widget creates a surrogate wrapper element and wraps the this.element.

If I replace this.element with the wrapper element events that the widget triggers are never handled because .bind() calls on the widget instance apply the handler to the original element, not the wrapper.

If I don’t replace the this.element with the wrapper element then the _mouse* events defined by ui.mouse are not called correctly because they are applied to this.element not the wrapper.

Is there an elegant way of somehow returning the wrapper element so that subsequent bind() calls are applied to it or making the ui.mouse prototype apply to an element other than this.element?

Any other elegant solution or advice would be very welcome.

These are the two scenarios I have tried.

Without replacing this.element

$.widget("ui.example", ui.mouse, {

    _containerElement: null,

    _create: function ()
    {
        if (this.element[0].nodeName.match(/canvas|textarea|input|select|button|img/i))
        {
            this._applyContainer();
        }else{
            this._containerElement = this.element;
        }

        // Applies mouse interaction handlers to this.element
        this._mouseInit();

    },

    _applyContainer: function () 
    {
        this.element.wrap("<span>");
        this._containerElement = this.element.parent();
        this._containerElement.css({position:'relative'});
    },


    _mouseStart: function (event) {

        // Not always called because it handles mouse interaction with
        // the IMG element rather than the wrapper element

        this._trigger("mouseevent");
    }
})

$("IMG").example().bind("examplemouseevent", function(){
    //This fires but only when the original IMG element is clicked, not the wrapper
})

Replacing this.element

$.widget("ui.example", ui.mouse, {

    _create: function ()
    {
        if (this.element[0].nodeName.match(/canvas|textarea|input|select|button|img/i))
        {
            this._applyContainer();
        }

        // Applies mouse interaction handlers to this.element
        this._mouseInit();

    },

    _applyContainer: function () 
    {
        this.element.wrap("<span>");
        this.element = this.element.parent();
        this.element.css({position:'relative'});
    },

    _mouseStart: function (event) {

        // This event is never handled because it is not raised on the original element. 
        this._trigger("mouseevent");
    }
})

$("IMG").example().bind("examplemouseevent", function(){
    //This never fires because the bind is to the IMG element, not the wrapper
})

I’m pretty sure the issue I’m having is due to the shortcomings of the way I understand jquery ui.mouse to work, or the restrictions of the jquery widget framework.

Replacing this.element with an element that wraps the origional this.element works but events are NOT passed to handlers that are bound to the widget later.

Not replacing this.element and storing a seperate reference to the wrapper causes the behavior of the jquery base ui.mouse to attach events to the wrong element.

The code is working as it is designed, my problem finding the best way to work with the restrictions of the design.

I can see a number of ways of addressing this. For example; duck-punching the _trigger method to trigger the event on the correct element or swapping the this.element value backwards and forwards while ui.mouse attaches the required handlers.
These and any other methods I have considered seem pretty messy.

I’ve looked at the native jquery.resizable widget code that also creates a wrapper but from what I can tell, it would also suffer from the same issue if it attempted to trigger events.

This is the first time I’ve worked with JQuery widgets so I’d like to confirm from a JQuery guru that im not missing something here?

Answer 1

I’m not entirely satisfied with it but the solution I’ve gone with is to swap out this.element call _mouseInit and swap it back again.

_containerElement: null,

_applyContainer: function () 
{
    var origionalElement = this.element;
    this.element.wrap("<div>");
    this._containerElement = this.element.parent();
    this.element = this._containerElement;
    this._mouseInit();
    this.element = origionalElement;
    this._containerElement.css({position:'relative'});
},

I’s not beautiful, but it works. I might have a go at overriding _mouseInit at some point in the future but this suits my purposes for now.