jQuery只適用於第一屏

Question

我有下面的下拉菜單，它可以在第一個屏幕上正常工作，但是同一屏幕可以製作多次，後續頁面jQuery無法顯示其他屏幕框。

現在我很困惑。任何幫助非常感謝。

<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

如果$('#producttypes')是在頁面加載後（從AJAX調用爲例）動態添加的元素，那麼你就必須使用delegate()爲了趕上從它的到來的事件。

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

委託函數放置在動態元素的父級上。父元素不一定是直接的祖先，它也可以是$('body')，但出於性能原因，您應該避免將所有事件都附加到身體上。

delegate() -

附加一個處理程序，以一個或多個事件的選擇相匹配的，現在或將來，基於一組特定的根元素的所有元素。