title: Button 'onclick' doesn't work in Internet Explorer
body: <p>I'm testing a web application with spring MVC 3 and I'm facing an error that I can't resolve.</p>
  
  <p>I have a controller that gives me a list of data from the DB that is handled in the JSP with a forEach statement.
  Also, inside the <code>forEach</code> i have a form that will be displayed in a <code>jquery-ui dialog</code> after clicking a button.</p>
  
  <p>My JSP looks like this:</p>
  
  <pre><code>&lt;html&gt;
  /**
  *
  *
  **/
  &lt;c:forEach items="${listaFecha}" var="fec"&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;c:out value="${fec.id}" /&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;c:out value="${fec.NOM_ASUNTO}" /&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;fmt:formatDate value="${fec.FEC_INICIO}" pattern="dd-MMM-YYYY" /&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;fmt:formatDate value="${fec.FEC_FIN}" pattern="dd-MMM-YYYY" /&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;c:out value="${fec.PERIODO}" /&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;button id="faqIE${fec.id}" value="${fec.id}" onclick="changeFec(${fec.id})"&gt;Editar&lt;/button&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;div id="edit-form${fec.id}" class="edit" style="text-align:center;" title="Editar Fecha"&gt;      &lt;/br&gt;   
                  &lt;form name="fechasE" method="POST" target="_parent" action="&lt;c:url value="/manage/insertaForm"/&gt;" id="form2E${fec.id}"&gt;
                      &lt;label style="margin-right:133px;"&gt;Tipo de Solicitud: &lt;/label&gt;&lt;/br&gt;
                      &lt;input type="text" class="fields" name="asE" value="${fec.NOM_ASUNTO}" disabled/&gt;&lt;/br&gt;
  
                      &lt;label style="margin-right:158px;"&gt;Fecha Inicial: &lt;/label&gt; &lt;/br&gt;    
                      &lt;input type="text" class="fields" name="date1E" value="&lt;fmt:formatDate value="${fec.FEC_INICIO}" pattern="dd-MMM-YYYY"/&gt;" /&gt;&lt;/br&gt;
  
                      &lt;label style="margin-right:165px;"&gt;Fecha Final: &lt;/label&gt;&lt;/br&gt;
                      &lt;input type="text" class="fields" name="date2E" value="&lt;fmt:formatDate value="${fec.FEC_FIN}" pattern="dd-MMM-YYYY"/&gt;" /&gt;&lt;/br&gt;
  
                      &lt;label style="margin-right:185px;"&gt;Periodo: &lt;/label&gt;&lt;/br&gt;
                      &lt;input type="text" class="fields" name="pdE" value="${fec.PERIODO}"/&gt;&lt;/br&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/c:forEach&gt;
  /**
  *
  *
  **/
  &lt;script type="text/javascript"&gt;
  function changeFec(n) {
      $( "#edit-form"+n ).dialog({     
              autoOpen: true,      
              height: 390,      
              width: 350,      
              modal: true,
              resizable: false,
              buttons: {        
                  Editar: function() {
                          $( "form2E"+n ).submit();
                          $( this ).dialog( "close" );          
                  },        
                  Cancelar: function() {          
                      $( this ).dialog( "close" );        
                  }      
              }        
          });
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>It work fine in Opera, Google Chrome and Firefox but in IE7,8,9 doesn't.
  I don't know why! I've been searching for hours without success! I hope somebody could help me.</p>
  
  <p>Thanks in advance and sorry for my bad English.</p>
  
  <p><strong>EDIT</strong>:</p>
  
  <p>This is how it have to work <a href="http://jsfiddle.net/NbddB/22/" rel="nofollow">http://jsfiddle.net/NbddB/22/</a> .
  But the value in <code>changeFec(value)</code> have to be dinamic and the divs are created dynamically inside the <code>forEach</code> statement.</p>