Question: I am attempting to programmatically display/render objects within a jade template, achieved by passing an array of objects to the view. The goal is to display a grid view with a maximum of 3 items/objects per row. I encountered an issue with nested elements self closing within in-line code blocks.

I have started experimenting with Mixins in order to achieve my goal:

```
mixin testCase_Columns(obj)
- for (var i = 0; i < obj.length; i++)
   if (i%3==0)
     div.row
        +renderObj(i, obj)

```

The above logic identifies if the current object number within my array is divisible by 3. This is how i intend to control rendering 3 items/objects per row. From here i pass the object and counter variable to a second mixin:

```
mixin renderObj(i, obj)
  - for(var xx = 0; xx <3 ; xx++)
      div.col-lg-4
        p='Object:' + obj[i].proj
        **- i++**

```

Above, i render three columns and add 1 to my counter 'i', 'i' in this case is used to state my object array key.

The problem i have is when i include the i++ increment statement jade returns the error:

```
type error: Cannot read property 'proj' of undefined 

```

However i have performed various tests including accessing and printing each object by manually stating key: 

```
obj[1].proj / obj[2].proj / obj[3].proj for example. 

```

When I attempt to add an increment statement it blows up in my face.

I am still learning node / jade etc. Perhaps my coding is incorrect. I am aware the above code statement lack fundamental logic to render a final row correctly which contains less than three objects but at the moment i am only testing. 

Any help would be much appreciated.

Thanks in advance.

Answer: 
Thats because it doesn't have enough time to get the click to trigger since the button moves position. You can see the click works if you hold the mousedown and move the mouse to the button and let the click go and you'll see click works. 

Either use `btn.on('mousedown',f3);` or position the button so it doesn't get moved on focusout

[**DEMO mousedown**](http://jsfiddle.net/YQxXN/1/)

[**DEMO button positioned**](http://jsfiddle.net/YQxXN/9/)

The way click works is that you have mousedown on an element and mouseup on it aswell, thats when it triggers click
Another way is to give a timeout of the focusout event. For example:

```
object.addEventListener('focusout', function() {
    /* Set some timeout */
    setTimeout(function () {
    // Things to do before the focus is out
    }, 50)
});

```