Question

I have the following dropdown that works fine with my jquery on the first screen its produced but the same screen can be produced more than one times and subsequent pages the jQuery doesn’t work for showing the other box.

I’m puzzled now. Any help much appreciated.

<xsl:for-each select="bankguarantees/bankguaranteedata">
    <div id="panel22" class="panels">
    <xsl:attribute name="id">panel22_<xsl:value-of select="@id"/></xsl:attribute>
      <table border="1" width="100%" height="100%"  bgcolor="#CECFFF" style="border-top: none" cellspacing="10">    
<tr>
<td>
<table border="0" width="100%" height="100%" bgcolor="lightyellow" class="inline">
<tr>
<td colspan="3" class="Header" height="1"></td>
</tr>


   <tr name="contliab" id="contliab">
            <script type="text/javascript">
             $('#producttypes').change(function()
             {
               if($('#otherprodtype').is(':selected'))
               {
               $('#otherprodtypebox').show();
               }
             else
              {
               if($('#otherprodtypebox').is(':visible'))
               {
                 $('#otherprodtypebox').hide();
               }
              }
             });;
            </script>
            <td class="Label">Product Type</td>
            <td class="field">
             <select name="producttypes" id="producttypes">
              <option value="interventionguar">
               <xsl:if test="producttypes/option[@id='interventionguar']='selected'">
                <xsl:attribute name="selected"/>
               </xsl:if>Intervention Guarantee</option>
              <option value="customsguar">
               <xsl:if test="producttypes/option[@id='customsguar']='selected'">
                <xsl:attribute name="selected"/>
              </xsl:if>Customs Guarantee</option>
              <option value="otherprodtype" id="otherprodtype">
               <xsl:if test="producttypes/option[@id='otherprodtype']='selected'">
                <xsl:attribute name="selected"/>
               </xsl:if>Other</option>
             </select>
             <input class="amdInputText" type="text" id="otherprodtypebox" value="" style="display:none;">
                <xsl:attribute name="value"><xsl:value-of select="otherprodtypebox"></xsl:value-of></xsl:attribute></input>
            </td>
           </tr> 

Answer 1

If $('#producttypes') is an element that is dynamically added after the page has loaded (from an AJAX call for example), then you’ll have to use delegate() in order to catch events coming from it.

$("#parentElement").delegate('#producttypes','change',function(){
  ...
});

The delegate function is placed on the parent of the dynamic element. The parent element doesn’t have to be a direct ancestor, it can also be $('body') but you should avoid attaching all of your events to the body for performance reasons.

delegate() –

Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.