jquery ui _trigger vs trigger

Question

I have developed a jquery ui-plugin and can't really understand which of these methods to use. According to the jquery ui documentation I should use _trigger to trigger the events, this allows the handlers to be initialized with the plugin like

$("#id").pluginname({ 
   click: function(){ 
      //called when clicked
   }
});

But if I later want to attach more listeners to this event I can't find any way to do that. I'm trying to use jquery bind, but that does not work. example:

$("#id").bind("click", function(){
    //This does not get fired on click if using _trigger
})

The only solution I have so far is to fire of both, but it feels kind of strange. My code must do the following to work:

$("#id").pluginname({
  click: function(){
     //called when my plugin uses this._trigger('click')
  }
}).bind(function(){
    //called when my plugin uses this.element.trigger('click')
});

I'm using custom events, but didn't think that was relevant for asking this question. Anyone have an idea on how to use event chaining when using _trigger()?

Solution 1

You should bind like this:

$("#id").bind("pluginnameclick", function(){

Solution 2

you should use this._on and this._trigger to do this so that events get cleaned op when destroying the widget.

otherwise you have to unbind the events yourself or otherwise the widget does not get cleaned up by the garbage collection of the browser

hope this answers your question

Comments

[Tommy]

Hi, I'm not able to get this to work, do you have any references to any documentation I can read to understand this better?

[bullgare]

hmm. Sorry, don't remember any. Try this - erichynds.com/jquery/tips-for-developing-jquery-ui-widgets (search for "dialogopen")

[Tommy]

Hi, Thanks for your answer. fortunately i discovered a comment on a page that said the event name was transformed to lower case. My example in this case didn't catch that I had an event with camel case name. However it means that your suggestion is correct. Thanks a lot for helping me out on this one.

[bullgare]

yes, everythig is in lowercase. if your example widget would have camelcase name, i would point to it. you can also trigger it like me.element.trigger( 'click.MyWidget' ) and in this case you should bind $("#id").bind("click.MyWidget", ...