title: Nested Multifield loop not working in AEM JS files
body: <p>I have a dialog where there is nested multifield. In the nested multifield, there's dropdown and other fields (that needs to be validated).</p>
  <hr />
  <p>Details of the dialog:</p>
  <p>Multifield</p>
  <p>Container (name = Parent)</p>
  <pre><code> Multifield
  
        Container (name = Child)
  
            dropdown (class = cq-dialog-dropdown-showhide-multi)
                TextField
  </code></pre>
  <hr />
  <p>Javascript code for looping :</p>
  <pre><code>(function ($, document, ns) {
  
     const A = function () {
           console.log(&quot;In A&quot;);
        $(this).find(&quot;[data-granite-coral-multifield-name='./Child'] .coral3-Multifield-item&quot;).each(function( index ) {
           console.log(&quot;In Loop&quot;);
        })
    };
  
    $(document).on(&quot;change&quot;, &quot;.cq-dialog-dropdown-showhide-multi&quot;, function() {
        A();
    });
  
    $(document).on(&quot;dialog-ready&quot;, function() {
        A();
    });
  
  })(Granite.$, document, Granite.author);
  </code></pre>
  <hr />
  <p>Function A gets called once the dialog content has loaded (on opening the dialog).</p>
  <p>Function A gets called when there is a change in dropdown value.</p>
  <hr />
  <p>Suppose, my parent multifield has 1 item and its child multifield has 2 items:</p>
  <p>Func A gets called when the dialog is opened and &quot;In A In Loop In Loop&quot; gets printed in console. Now if I change the dropdown value, func A gets called again, but this time only &quot;In A&quot; gets printed in console. The loop doesn't get executed even though the number of child items are still the same.</p>
  <p>Not sure what exactly may be the issue. Please advice.</p>