title: JavaScript composite component nested forms
body: <p>I have a simple composite component, which is nested in some form etc. I would like to bind the <code>click</code> event for all radio buttons in the <code>&lt;h:selectOneRadio&gt;</code> of this composite component. I am trying to bind this event by <code>name</code> property of inputs which will be created after <code>&lt;h:selectOneRadio id&gt;</code>. Unfortunetly it is nested, so this code doesn't work, because the generated radio button ID is like:</p>
  
  <pre><code>"form:someid:someid:someid etc ect."
  </code></pre>
  
  <p>Composite component code:</p>
  
  <pre><code>&lt;cc:implementation&gt;
      &lt;..some forms etc.&gt;
          &lt;h:selectOneRadio id="#{cc.attrs.id}" value="#{cc.attrs.value}"&gt;
              &lt;cc:insertChildren/&gt;
          &lt;/h:selectOneRadio&gt;
      &lt;/..some forms etc.&gt;
  
      &lt;script type="text/javascript"&gt;
      /* &lt;![CDATA[ */
  
          $('input[name=#{cc.attrs.id}]').click(function() {
                  console.log("click");
  
          });
  
      /* ]]&gt; */
      &lt;/script&gt;
  &lt;/cc:implementation&gt;
  </code></pre>
  
  <p>Client code:</p>
  
  <pre><code>&lt;mycomps:radio id="testID" ... &gt;
      &lt;f:selectItem itemLabel="test" itemValue="false"/&gt;
      &lt;f:selectItem itemLabel="test2" itemValue="true"/&gt;
  &lt;/mycomps:radio&gt;
  </code></pre>