Visualforce rendered with jQuery

Question

Another problem has come uppon me. I have a button which shows a form with a list of inputFields with a map as a value. Since I have to populate the Keys before I show the form, I was giving me an error saying such key didn't exist. I've changed the display:none I had to rendered={!state} whenever state is true the form pops up, nothing wrong here. The problem is all my jQuery stuff I have that was working with display:none now is gone! Is there any way to use jQuery in a rendered state form?

     <script type="text/javascript">
     var j$ = jQuery.noConflict();
     j$(document).ready(function() {
        j$("[class$=costType]").find('input').bind("change", function(event, ui) {
            if(j$(this).val()=='Value'){
                j$("[class$=typeA]").closest('tr').css('display','none');
                j$("[class$=typeB]").closest('tr').css('display','');
            }
            else{
                j$("[class$=typeA]").closest('tr').css('display','');
                j$("[class$=typeB]").closest('tr').css('display','none');
            }

        });
</script>
        <apex:outputPanel>
    <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!state}"/>
        <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!state}">
          <apex:pageBlock title="BlaBla">
           <apex:pageBlockSection title="General Information" columns="2">

                    <apex:selectRadio styleClass="someType" label=" " value="{!choice}">
                        <apex:selectOptions value="{!items}"/>
                    </apex:selectRadio>
                    <apex:inputField styleClass="typeA"  value="{!Value__c}"/>

                    <apex:inputField styleClass="typeA" value="{!Value__c}"/>

                    <apex:inputField styleClass="typeB" value="{!Value__c}"/>

           </apex:pageBlockSection>         
            </apex:pageBlock>                  
        </apex:outputPanel>
    </apex:outputPanel> 

Answer 1

You can try to pack your jQuery code to the function and execute this function only if the panel is rendered:

<script>
function doStuff(){
    j$("[class$=costType]").find('input').bind("change", function(event, ui) {
        if(j$(this).val()=='Value'){
            j$("[class$=typeA]").closest('tr').css('display','none');
            j$("[class$=typeB]").closest('tr').css('display','');
        }
        else{
            j$("[class$=typeA]").closest('tr').css('display','');
            j$("[class$=typeB]").closest('tr').css('display','none');
        }
    });
}
</script>

<apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!state}"/>
    ....
    <!-- put this definition to the end on the panel -->
    <script>
        doStuff();
    </script>
</apex:outputPanel>