Question

I’m instantiating a dijit button inside a custom widget. That bit all works fine. In widget code I’m binding an onclick event handler but when I click the button the event fires twice. Also a second issue is that it also binds the click event to other buttons in the page that aren’t related to the widget. Below is a simplified version I what I have. Can anyone tell me why it’s doing that. I’ve spent the last couple of hours trying to fix it.

The code is below but you can also see it here

This is the html page which instantiates the custom widget
https://github.com/screenm0nkey/dojo/blob/master/widgets/destroy-widget.html

This is the custom widget
https://github.com/screenm0nkey/dojo/blob/master/js/tag/widgets/DestroyWidget/Widget.js

This is the template which contains the nested widget
https://github.com/screenm0nkey/dojo/blob/master/js/tag/widgets/DestroyWidget/templates/template.html

This is the html inside the widget template;

<div style="border: solid 1px pink">
<h3>${name}</h3>

<div dojoType="dijit.form.Button" data-dojo-attach-point="removeBtn" class="removeBtn">
  click me.
</div>

This is the JavaScript inside the widget which binds the handler;

define('tag/Widget', ['dojo', 'dojo/parser', 'dijit/_Widget', 'dijit/_TemplatedMixin'],

function(d, parser) {

return d.declare('tag.Widget', [dijit._Widget, dijit._TemplatedMixin], {

templateString : d.cache("tag", "/templates/template.html"),
widgetsInTemplate : true,
name : 'no name',
button : 'no button',

postCreate : function() {
  parser.parse(this.domNode);
  this.placeAt(d.byId('authorContainer'));
},

startup : function() {
  dijit.registry.forEach(dojo.hitch(this, function(w) {
    if (w.class === 'removeBtn') {
      this.button = w;
      return;
    }
  }))

  this.button.connect('onclick', function(evt) {
    console.log(evt.target);
  });
},

});
});

And this is the console output;

<input type="button" value="" class="dijitOffScreen" tabindex="-1" role="presentation" data-dojo-attach-point="valueNode">
<span class="dijitReset dijitInline dijitButtonText" id="dijit_form_Button_0_label" data-dojo-attach-point="containerNode">click me.</span>

Answer 1

I don’t know precisely why you get your problem but I think you might have avoided it if you used a more “Dojo style” way of doing things instead of your current “JQuery style” that uses classes for navigation:

1. Try using the new data-dojo attributes instead of the old dojoType style:

   <div data-dojo-type="dijit.form.Button" class="remove">
   

2. Use explicit attach points to reference inner widgets:

   <div data-dojo-type="dijit.form.Button"
        data-dojo-attach-point="removeBtn"            
        class="remove">
       Click me
   </div>
   

3. The attach point will set a property of the main widget. You can access the button through it

   dojo.connect(this.removeBtn, ...
   

4. Use onClick to connect to widgets instead of onclick

   dojo.connect(this.removeBtn, 'onClick', function(){ ... });