StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POJQuery UI widget - How to raise events with a wrapper element
text
Body
copied!<p>I have been developing a jquery widget that extends ui.mouse.</p> <p>The widget needs to react to mouse events by creating elements and appending them to this.element.</p> <p>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.</p> <p>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.</p> <p>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.</p> <p>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?</p> <p>Any other elegant solution or advice would be very welcome.</p> <p>These are the two scenarios I have tried.</p> <h1>Without replacing this.element</h1> <pre><code>$.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 }) </code></pre> <h1>Replacing this.element</h1> <pre><code>$.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 }) </code></pre> <p>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.</p> <p>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.</p> <p>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.</p> <p>The code is working as it is designed, my problem finding the best way to work with the restrictions of the design.</p> <p>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.</p> <p>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. </p> <p>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?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload