title: How to detect onclick on Kinetic JS layer.children?
body: <p>So I have to make a webpage, where there is a piece of furniture and you can color its parts.
  First you have to choose a colour, then click on a shelf or box.</p>
  
  <p>I have made this so far:</p>
  
  <p><a href="http://tone-me.com/gridalea/tone.html" rel="nofollow">http://tone-me.com/gridalea/tone.html</a></p>
  
  <p>The only problem I got is when I add color to a box,shelf. For the first box,shelf it works fine, but when I try to do it again, it won't fire the onclick event. Nothing happens.My concept is that I delete the whole model, then re-draw it, with the selected olour. But when I try to modify the re-drawn model nothing will happen. Tested it so many times, with other solutions too (e.g. where I redrew only the part which is clicked).</p>
  
  <p>This is my script:
  <a href="http://tone-me.com/gridalea/js/tone.js" rel="nofollow">http://tone-me.com/gridalea/js/tone.js</a></p>
  
  <p>This part re-draws the whole model:</p>
  
  <pre><code>function model1(){
          layer.destroyChildren();
          layer.clearCache();
          racs1();           //adds outlines to layer
          dobozok1();        //adds boxes, shelves, etc. to layer
          stage.add(layer);
      };
  </code></pre>
  
  <p>Here is the click detection:</p>
  
  <pre><code>layer.children.on('click', function() {
      var name=this.attrs.name;
      switch (name){
          case 'topl':
              bc[2]=[res[0],res[1],res[2],1];
          break;
          case 'topb':
              bc[3]=[res[0],res[1],res[2],1];
          break;
          case 'midr':
              bc[4]=[res[0],res[1],res[2],1];
          break;
          case 'mids':
              bc[5]=[res[0],res[1],res[2],1];
          break;
          case 'bottoms':
              bc[6]=[res[0],res[1],res[2],1];
          break;
          case 'bottomb':
              bc[7]=[res[0],res[1],res[2],1];
          break;
          default:
      };
      model1();
  });
  </code></pre>
  
  <p>When it fires, I change the <code>bc</code> array which contains the colours of the boxes and the array <code>res</code> has the new values.</p>
  
  <p>Then I run the <code>model1</code> function shown above, which destroys everithing, then redraws them with the modified colors.</p>
  
  <p>I tested it with Firebug, every variable and object has their correct values set, (array <code>res</code> is the exception, you have to first click on a color, to make it get its value, I'll fix that later)
  I don't know what the problem is. Why it won't detect more than one clicks. The <code>layer</code> has the children polygons after being redrawn, the polygons have their name attributes correctly, but it wont detect them anymore.</p>