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() -

附加一个处理程序，以一个或多个事件的选择相匹配的，现在或将来，基于一组特定的根元素的所有元素。