You're using .live() wrong, this actually has nothing to do with the widget factory. You're creating a separate live event handler for every single instance of your plugin, which completely defeats the purpose of using event delegation.
On Sep 22, 9:50 am, Neil Craig <[email protected]> wrote: > Take the following example: > > (function($) { > > $.widget("ui.mywidget", { > > _init: function() { > // init code for mywidget > // can use this.options > if (this.options.makered) { > // and this.element > this.element.css("background-color", "red"); > } > > var self = this; > self.element.find("div").live("click", function() { > self.fire(); > }); > }, > > _doSomething: function() { > // internal functions should be named begin with an > underscore > // manipulate the widget > }, > > value: function() { > // calculate some value and return it > return this._calculate(); > }, > > length: function() { > return this._someOtherValue(); > }, > > destroy: function() { > $.widget.prototype.apply(this, arguments); // default > destroy > // now do other stuff particular to this widget > }, > > fire: function() { > this._trigger('onfire', null, { val: this }); > } > > }); > > $.extend($.ui.mywidget, { > getter: "value length", > defaults: { > option1: "defaultValue", > makered: true > } > }); > > })(jQuery); > > And here is the HTML: > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> > > <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en" > dir="ltr"> > <head> > <title>jQuery UI - Widget Factory Test</title> > <script type="text/javascript" language="javascript" > src="Script/ > jquery-1.3.2.min.js"></script> > <script type="text/javascript" language="javascript" > src="Script/ > jquery-ui-1.7.1.custom.js"></script> > <script type="text/javascript" language="javascript" > src="Script/ > testwidget.js"></script> > <script type="text/javascript"> > $(function() { > > $("#el1").mywidget({ > onfire: function() { alert("el1 fired > up"); } > }); > > $("#el2").mywidget({ > onfire: function() { alert("el2 fired > up"); } > }); > > $("#el1").bind("mywidgetonfire", function() { > alert("post init event on el1"); > }); > > }); > </script> > </head> > <body> > <form id="form1" action=""> > <div id="el1" style="margin:2px; > padding:2px;">Element #1 <div > style="margin:2px; border:solid 1px #000; background- > color:yellow;">Fire it up!</div></div> > <div id="el2" style="margin:2px; > padding:2px;">Element #2 <div > style="margin:2px; border:solid 1px #000; background- > color:yellow;">Fire it up!</div></div> > </form> > </body> > </html> > > All the 'onfire' event handlers get called for all instances of the > widget. Replacing it with the bind method, only the applicable > widget's 'onfire' event handlers get called. > > On Sep 22, 3:30 pm, Scott González <[email protected]> wrote: > > > > > Can you please provide a little more detail here? I'm really not sure > > what you're talking about. > > > On Sep 21, 5:43 am, Neil Craig <[email protected]> wrote: > > > > I develop a lot of widgets using the jQuery UI widget factory, and > > > noticed that one should not use the "live" methods for handling > > > events. It is best one handle the event delegation oneself to avoid > > > problems like having similar events attached to other instances of the > > > same widget when it should only fire on the applicable widget or not > > > firing at all. > > > > Don't know if anyone came across the same issues? Could make for an > > > interesting discussion..... --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en -~----------~----~----~----~------~----~------~--~---
