Search code examples
event-handlingdojomouseeventdom-events

dojo eventListener via dojo.connect attach to multiple objects with same id


I am trying to attach an onclick event to a set of links with the same id("linkToDisplay") and it doesn't seem to be triggering my onclick event code is as follows:

var handle = [];
var link = dojo.query('#linkToDisplay a').forEach(function(node, index, array){

    handle.push(dojo.connect(node,
        "onclick",
        null,
        function(evt) {
            console.log("mouseup detected, firring off server request");
            dojo.xhrGet({url:'default/data/getPageContent?main=true&pageId='+evt.target.name,
                         load: funcCallBack,
                         error: funcError});
            }
          ));

    });

funcError and funcCallBack are defined and working (if I only pass in a single object retrieved by dojo.getId, but otherwise my script fails silently).

I am putting this code inside the dojo.addOnLoad code block, and I don't see any events fired off when I click anywhere on the page so I'm pretty sure its not a problem with attaching the event listener to the wrong piece of the DOM.


Solution

  • so it appears that dojo enforces a schema where id's are unique, so if some DOM element has an id that matches another the end result is that the query method only returns the first.

    here is a sample of what I ended up with:

    dojo.query(".links a").onclick(function(evt){
                                        dojo.stopEvent(evt);
                                        var link = evt.target;
                                        onSubmit(link)
                                    }
                            );
    

    .links specifies the class="links", and then from there I sort for any anchor objects by including the 'a' after and I use a convenience function for the onclick event, grab the target and pass it to the onSubmit function (which contains some validation and an xhr request.).