Dojo query cannot find div

Question

I am kind of new to Dojo and I have a weird problem using it.

My goal is to show some search results.

So I build a store, query it and display the results by adding a new div for each result:

var adresseStore;
require([
         "dojo/dom", 
         "dojo/store/Memory",             
         "dojo/dom-construct",
         "dojo/query",
..
     ], 
function(dom, Memory, domConstruct, query){
  ...       
  var container = dom.byId("chefDiv")
  adresseStore = new Memory({data:data, idProperty: "myId"});
  adresseStore.query().forEach(function(item, i){
    addRow(item, container)
    // do something with the index
  }); 
...
});

where addRow basically calls domConstruct.create("div",{...,class: "adresse",...}, container);

and it works fine - I've got something like:

<div id="chefDiv">
  <div class="adresse" ...>...</div>
  <div class="adresse" ...>...</div>
</div> 

Now, I want to open a window when someone clicks on an "adresse" div. To do that I have added below code:

 query(".adresse").on("click", function(){
     // do stuff and open a window
 } 

and it still works fine.

Great !!! How about adding a button that will hide non-valid results? let's go:

first, add below code:

 query(".sltValide").on("click", function(){
   domConstruct.empty("chefDiv");
   adresseStore.query({validite:"V"}).forEach(function(item, i){
     addRow(item, container)
     // stuff with i
   }); // foreach
 }); // sltValide 

everything displays well, I still have my

 <div id="chefDiv">
   <div class="adresse" ...>...</div>
   <div class="adresse" ...>...</div>
 </div> 

with the data I want to display, I'm happy ...

... that is until I click on a div to open the window ...

the query(".adresse").on("click", function(){... never fires because query(".adresse") doesn't return anything

Does anyone have a clue?

Answer 1

The problem is that your query() will only contain the DOM nodes before all your nodes are dynamically created.

To fix that you should provide a query to the on() function (similar to how jQuery handles it), for example:

query("#chefDiv").on(".adresse:click", function() {
    // Code that should be executed
});

Of course, you have to use a container node to query, in your case it should be #chefDiv. This way, dynamic nodes are also taken into account.

I also made a full example which you can see here: http://jsfiddle.net/ELSxr/