javascript - Foundation 5 Dropdown button not working in nested table row -

dropdown button not working if dropdown button inside nested table row.

please refer example in jsbin: http://emberjs.jsbin.com/yesaguwoli/edit?html,output

• click on header 1 show expanded table row.
• then, click on dropdown button 1. dropdown menu does not appear after button clicked.
• click on header 2 show expanded table row.
• then, click on + button. dropdown menu does not appear after button clicked.

however, if dropdown button located in table row itself, dropdown button work fine in both places, (ie. in table row , in nested table row)

refer example: http://emberjs.jsbin.com/mozudezewo/edit?html,css,js,output

• click on dropdown button 1. dropdown menu appears after button clicked.
• click on header 2 show expanded table row.
• then, click on + button. dropdown menu appears after button clicked.

i'm not sure why dropdown button behaving in such way. resolve issue appreciated. thank you!

i have taken working example, , wrapped in same {{if}} statements broken example (http://emberjs.jsbin.com/bubeveyapo/1/edit?html,output) , no longer works.

this because initializing foundation dropdowns on didinsertelement hook of app.applicationview.

the problem when initialize foundation, there no .dropdown in dom @ time app.applicationview inserted hidden {{if}} statements. these {{if}} tags remove , insert html blobs in dom.

so need find way of knowing when dropdown has been inserted , re-initialize foundation.

foundation has way of handling re-initialization $(document).foundation('dropdown', 'reflow'); check dom again foundation'ey , re-apply javascript it.

this jsbin has re-initialized foundation on toggledetails action, that's when buttons being inserted.

really should not relying on foundation show hide dropdowns , @ adding {{action}} hooks on them , manually managing show/hide. has been answered here on so take @ this question.