riot.js 嵌套标签 - 如何使用 jquery 选择内部 html 元素？

Question

I have a riot tag which contains a nested tag... example:

<parent>
<!-- dome html here...-->
     <child></child> <!-- visually - the child is mounted correctly !-->

     <script>
       this.on('mount', function(){
            $('select').material_select();
       });
     </script>
</parent>

<child>
   <select>
       <option values="1">1</option>
       <option values="2">2</option>
       <option values="3">3</option>
   </select>
   <script>
       this.on('mount', function(){
            $('select').material_select();
       });
   </script>
</child>

Now, I want to use the Materialize library and jquery to make the list materialize-designed such as in http://materializecss.com/forms.html It usually works fine when the 'select' tag is in a parent tag!

However, I cant find where to initialize the $('select').material_select(); command in the child, and thus, the select tag in the child tag is not visible!.

I have tried to initialize it inside the on('mount') area both of the parent and the child tags - but it seems as always the $('select') selector return an empty array - any ideas?

Answer 1

You can try to force the children to update and then call the on('updated') event on the child, because it´s seems that the DOM is not ready onMount. Check this example.

<parent>
<!-- dome html here...-->
     <child></child> <!-- visually - the child is mounted correctly !-->

     <script>
       this.on('mount', function(){
            this.update();
       });
     </script>
</parent>

<child>
  <div>
   <select>
       <option values="1">1</option>
       <option values="2">2</option>
       <option values="3">3</option>
   </select>
  </div>
   <script>
       this.on('updated', function(){
            $('select').material_select();
       });
   </script>
</child>

online version https://jsfiddle.net/vitomd/Lm4dy21d/5