I've tried the context approach as well with the same result:
(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;
$("div", self.element.get(0)).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);
In my example, if the DIVs inside the container of the widget
constantly change (added/removed), how would one use the live() method
for event delegation if one cannot use it within one's widget. I've
resorted to creating a single click event handler that inspects the
event target to determine the appropriate action.
On Sep 23, 3:32 pm, Scott González <[email protected]> wrote:
> 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
-~----------~----~----~----~------~----~------~--~---
