2013-10-29 130 views
0

我目前被困在一个愚蠢的事情几个小时,我看不到隧道尽头的光。jQuery的克隆datepicker&submitName IE bug

我想克隆表格中的自动完成,日期选择器&其他基于HTML模板的东西。我看到datepicker函数生成一个唯一的ID,所以我创建了没有该类的模板,并在克隆过程中添加它。有趣的是datepicker显示出来,但当我尝试选择一个日期时卡住了。

我试过,以及改变输入contening的日期选择器的名称是唯一的,但它似乎IE浏览器有“名”的一个有趣的错误得到改变为“submitName”

任何帮助&建议欢迎和欣赏。这里是我的代码如下:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <SCRIPT language="javascript"> 
     $(function() { 
      $(".datepicker").datepicker({ dateFormat: "dd/mm/yy" }); 
     }); 
    </SCRIPT> 



    <button class="addLeg">Add Leg</button> 
    <button class="delLeg">Remove Leg</button> 
    </span> 
<TABLE width="914px" border="0"> 
     <TR align="center"> 
     <TD width="23"></TD> 
     <TD width="140" class="g1">Date</TD> 
     <TD width="147" class="g1">Dep Time</TD> 
     <TD colspan="2" class="g1">Routing</TD> 
     <TD width="144" class="g1">Flight Time</TD> 
     <TD width="142" class="g1">Pax</TD> 
     </TR> 
</TABLE> 
<TABLE id="Leg" style="display:none" width="400px" border="0"> 
     <TR > 
     <TD class="g1"><INPUT type="checkbox" class="delCheckLeg" name="chk"/></TD> 
      <TD class="1"><INPUT type="text" id="tripdate" name="tripdate"></TD> 
     <TD class="g1"><INPUT type="text" name="deptime"/></TD> 
      <TD class="g1"><INPUT type="text" name="routingdep"/></TD> 
      <TD class="g1"><INPUT type="text" name="routingarr"/></TD> 
      <TD class="g1"><INPUT type="text" name="fttime"/></TD> 
      <TD class="g1"><INPUT type="text" name="pax"/></TD> 
     </TR> 
</TABLE> 
<div id="trip"> 
<TABLE id="Leg0" width="400px" border="0"> 
     <TR > 
     <TD class="g1"><INPUT type="checkbox" class="delCheckLeg" name="chk"/></TD> 
      <TD class="g1"><INPUT type="text" class="datepicker" id="tripdate0" name="tripdate0"></TD> 
     <TD class="g1"><INPUT type="text" name="deptime"/></TD> 
      <TD class="g1"><INPUT type="text" name="routingdep"/></TD> 
      <TD class="g1"><INPUT type="text" name="routingarr"/></TD> 
      <TD class="g1"><INPUT type="text" name="fttime"/></TD> 
      <TD class="g1"><INPUT type="text" name="pax"/></TD> 
     </TR> 
    </TABLE> 
</div> 

<script type="text/javascript"> 
    var uniqueId = 1; 
    var uniqueLeg = 1; 
    $('.addLeg').click(function() { 
     var copy = $('#Leg').clone(); 
     var formId = 'Leg' + uniqueLeg; 
     copy.attr('id', formId); 
     copy.removeAttr('style'); 

     copy.find(':input#tripdate').each(function() { 
      $(this).addClass('datepicker'); 
      $(this).datepicker({ dateFormat: "dd/mm/yy" }); 

      var dateid = 'tripdate' + uniqueLeg; 
      $(this).attr('id', dateid); 

       }); 

     $('#trip').append(copy); 
     uniqueLeg++; 
    }); 
</script> 

回答

0

它看起来像如果你调用datepicker后,它改变了元素的id它弄糟了它。

这是jsfiddle example。 我刚搬到下面一行

$(this).datepicker({ dateFormat: "dd/mm/yy" }); 

下面

$(this).attr('id', dateid); 

我也是在不断变化的投入名称加入,我想它在IE和它似乎工作。

+0

非常感谢!它就像一个魅力:)只有一个小问题,IE中的名称/ submitName问题依然存在。我目前正在使用IE11。我会找出解决方案。谢谢 :) – poypoy